tour in react

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Complete guide to building product tours on your React apps

Introduction

Ever heard of tours in product UI?

Product tours are self-explaining tips UI for the website user to break down complex UX and make it easily useable.

Product tours play a vital role in B2B product UI. It helps save customer support time related to repeated ‘how-to-use’ questions about the UX.

What problems do product tours solve?

Product tours help with onboarding users to new and complex UX and helps to get users familiar with UI functionalities. They’re also useful for showcasing new updates on product UI, and they can save time for the customer success team.

Slack, Trello, Asana, and Invision are some of the big products that use product tours for different UX needs.

The indirect alternative to product tours including FAQs about product functionalities, product video demos and tours, and on-demand tips UI.

However, video tours or FAQs don’t have the same level of impact as inline product tours.

The majority of users don’t look for tutorials outside the UI.

On the other hand, on-demand tips UI are similar to product tours and can have a similar impact.

In this post, you’ll learn how to build a simple product tour for your React application. Before building, it you’ll first need to learn about existing React libraries.

Existing React libraries for product tours

Even though product tours are used by lot of companies, there aren’t many React-based tour UIs. Some of the libraries are React Tour and React Joyride.

Over 200k developers use LogRocket to create better digital experiences

React Tour library

React Tour has around 1.4k stars on Github and is moderately active.

It has very nice UI if you need a simple product tour without much customization. If this is the case, React Tour UI will be good enough.

You can view the demo for React Tour here .

How it works

With React Tour, you pass the classname selector and content for each step to the component.

It will render the tour UI based on a button click, or after mounting the component. It’s simple for static pages and UI:

However, if you need to customize for a custom behavior, then it won’t work very well. The component is very rigid, and styles aren’t exposed well enough to make it reusable.

One drawback is that if you don’t use styled-components in your project, then you won’t have any luck using the component. There is no other way — the library has a hard dependency for styled components.

Additionally, if a classname selector is not present in the current screen, then React Tour just displays the non-matched content in the center of the screen. There is no way to hide it.

The only way to overwrite such behavior is to trigger the next steps through our own logic, but that defeats the  purpose of the component.

It’s almost as complex as writing your own component for product tours.

More great articles from LogRocket:

• Don't miss a moment with The Replay , a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to use the React children prop with TypeScript
• Explore creating a custom mouse cursor with CSS
• Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

React Tour really shines when you don’t want to customize a lot, and when you want basic tour functionality with beautiful UI and UX.

It also works well for static content or dynamic content where the selector labels always exist on the UI.

React Joyride library

The next famous React product tour library is React Joyride . It has 3k stars on Github and is also actively developed.

The UI isn’t as elegant as React Tours, but the API is less rigid. It allows for some level of customization.

Of course, it has its own limitations.

The docs aren’t good enough if you need custom solution on top of basic React tour functionality. The props API also isn’t very intuitive or simple.

The only difference is that it has solutions for most use cases in product tours. They expose all the events and actions to the end user, so you can capture those actions and do whatever customization you want.

Building a simple product tour in a React app

First, let’s build a simple React tour without any custom functionality.

We’ll use react-dashboard by creative tim  as our base application.

This loads the product tour on top of it.

This is what the dashboard UI looks like:

We’ll do a product tour on this UI. You can see the final product tours UI here .

Let’s create the simple product tour component:

Load this tour component anywhere on the page to load the blinking beacon UI. If you click that beacon, it will open the tour. The next button will let you navigate til the end of the tour.

Joyride components take a lot of props. The most important ones are steps props. It accepts an array of objects with target selector elements and content.

Continuous props are used for showing the next button on each step.

You can see the demo for this simple tour component here .

Now let’s add more features and make our product tour more customized. Simple features are:

Skip option on each step

• Change locale text labels
• Hide / show buttons (next, skip, back buttons)

Custom styles like button colors and text alignment

Then we’ll add the custom feature like:

• Auto start the tour
• Start the tour by manual triggers (i.e., through link or button click)
• Hide blinking beacon
• Auto start tour once and only show tour on manual triggers next time

Most of the basic functionalities can be achieved through the props provided by Joyride docs .

Adding showSkipButton to true will do the trick. Skip link will skip the remaining step on the tour.

How to change text labels for buttons and links

Let’s change the last button text as end tour and skip button text to close tour .

How to hide Back, Next and Skip buttons

• For the Skip button, use *showSkipButton* props
• For the Back button, use hideBackButton
• For the Next button, use continuous props

Unlike other props, continuous props work differently. They either show the Next button or show a Close button, depending on the boolean value passed to the props.

You can see how inconsistent the props API naming are. It isn’t very easy to find lot of hidden features unless you read the complete docs for Joyride couple of times 😅

Styles are exposed as an object. So if you pass a style object to the component, the component will merge it with their default styles.

A caveat to this way of styling is that it only supports a handful of the object styles, which are already defined on the component.

It won’t allow you to customize everything on an element level. Also, the classnames used in the rendered elements are not very easy to customize.

However, the library exposes props to use your own elements instead of the default elements.

Some of the components are:

• Beacon component ( beaconComponent prop)
• tooltip component ( tooltipComponent prop)

Controlled product tour

So far, you’ve learned how to use the Joyride library to create a basic product tour and customize it using props.

You’ve also seen some of the limitations to styling the component.

Until now, the tour has been controlled in the library. You just pass the steps and tweak some props.

It’s possible to control the tour and trigger goto a particular step directly through button click, but it requires some coding.

We’ll see how to do it by achieving a few of the features.

The Joyride component exposes some of the actions and events through callback. You need to capture the callback and, based on the function, you can customize your functionality.

It’s simple to make the component controlled by passing a prop stepIndex .

stepIndex is the index number and starts from 0. Once you pass the values, the Next and Back button clicks need to be handled by you.

Let’s get to it. First, we will define the steps:

Here’s the initial state to make the component controlled:

To auto start the tour, you need to pass disableBeacon: true in the first step. This will just disable the beacon. But you need to trigger start by changing the state run: true :

The actions that are important to make the functionality are Close button click, Skip button click, Next, and Back button click.

Let’s implement the reducer function:

Now we’ll listen to the events and dispatch proper state changes to manage the tour:

Here’s a quick overview of how each action, event, and state update works:

If the Close button, Skip button, or End Tour button are clicked, then STOP the tour. Meanwhile, if the Next or Back button are clicked, then check whether the target element is present in the page.

If the target element is present, then go to that step. If it’s not present, find the next step target and iterate.

Joyride expose EVENTS, STATUS, and ACTION labels. You can use those to listen to the callback event without hardcoding it.

Let’s also auto start the tour when the page loads:

You can even trigger the start of tour using button click:

Right now, we have it set up so that the tour will be shown every time you refresh the page.

If you only want to show the tour once and then trigger it only through manual click, you can do so using localStorage .

You can find the working example code here and the demo here .

Steps for building a custom product tour in React

We’ve achieved the product tour using the Joyride library.

But what if we need to create our own?

Let’s walk through building a tour component.

The biggest challenges to building tour components include finding the target element and showing a popover component, as well as ensuring the popover component calculates the available window space and automatically displays by the target element.

It can also be difficult to ensure the tour component is reusable and that styles are easily extended.

To build a custom tour component in React, it’s easiest to isolate the functionality and component UI with these React Hooks:

• useTour – a custom Hook to build your own UI on top of functionality
• Tour – a dumb UI component that consumes useTour to load the tour portal UI

This mock code  shows how useTour works:

I hope this article helped you learn the tricks of creating product tour components in your React application. Let me know your experience on tour UX in the comments 🤗

Get set up with LogRocket's modern React error tracking in minutes:

• Visit https://logrocket.com/signup/ to get an app ID

Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Implementing infinite scroll in Next.js with Server Actions

Infinite scrolling in Next.js no longer requires external libraries — Server Actions let us fetch initial data directly on the server.

Integrating Django templates with React for dynamic webpages

Create a dynamic demo blog site using Django and React to demonstrate Django’s server-side functionalities and React’s interactive UI.

Using aoi.js to build a bot on Discord

Explore how the aoi.js library makes it easy to create Discord bots with useful functionalities for frontend applications.

Web Components adoption guide: Overview, examples, and alternatives

Evaluate Web Components, a set of standards that allow you to create custom HTML tags for more reusable, manageable code.

Leave a Reply Cancel reply

• Blessing Krofegha
• Aug 6, 2020

A Practical Guide To Product Tours In React Apps

• 13 min read
• UI , Apps , React
• Share on Twitter ,  LinkedIn

About The Author

Blessing Krofegha is a Software Engineer Based in Lagos Nigeria, with a burning desire to contribute to making the web awesome for all, by writing and building … More about Blessing ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

As stated on Appcues :

“Product tours — sometimes called product walkthroughs — introduce users to a new product and help them find their bearings.”

Usually, when it needs to showcase a new feature or complex UI functionality in a web app, the customer-success team would send a campaign email to all of its users. While this is a great way to create such awareness, some users might not have the opportunity to see the added feature; hence, the purpose of the email would be defeated.

A better way to increase user awareness of a particular feature in a web app is by integrating concise, self-explanatory UI tips, called product tours.

Product tours guide users to “a-ha” moments , or showcase high-value features that are being underused. Product tours can be powerful tools to introduce users to a new product and to help them find their bearings. They can draw attention to product launches, promo offers, and product sales.

But when done wrong, product tours can end up feeling like a backseat driver. And no one likes a backseat driver, do they?

In this tutorial, you’ll learn about what a product tour is and the types of product-tour packages in the React ecosystem, along with their pros and cons.

If you’re building customer-facing products using React, then you might be keen to implement this in your React application. By the end, we’ll have built a product tour for a simple shopping-cart UI using React Joyride .

We won’t go through React and JavaScript’s syntax basics, but you don’t have to be an expert in either of these languages to follow along.

Product Tour Guidelines

Product tours are a tricky aspect of web apps, requiring some user-experience expertise to drive results. I’d recommend going through Appcues’ tips for product tours. The following are a few guidelines to consider.

Never Lecture

Putting a lot of tours on a web page is tempting. But users are usually not keen on long introductory tutorials. They become anxious when they have to ingest a lot of information before being able to use a feature in the app.

Break It Down

Don’t teach everything. Focus on a single feature, and create a tour of two to three steps to showcase that feature. Show many small tours, rather than a single long tour. Prioritize their sequence.

Do you enjoy taking your own tour? How about your teammates? Present the tour in such a way that users will understand. Showcase value, rather than stories.

Now that we know the value of product tours and seen some guidelines for building them, let’s cover some React libraries for product tours and learn how to use them.

There are only a few React-based libraries for implementing tours. Two of the most popular are React Tour and React Joyride .

React Tour has around 1,600 stars on GitHub and is being actively developed. The best use case for React Tour is a simple product tour in which little customization is required. A demo is available.

How It Works

With React Tour, you pass the className selector and content for each step to the component. The library will render the tour’s user interface based on a button click, or after you’ve mounted the component. It’s simple for static pages and UIs:

• React Tour is best for tours that need little customization.
• It works well for static content and for dynamic content whose selector labels always exist in the UI.
• Fans of styled-components might find it interesting because it has a hard dependency on styled-components.
• If your project has no dependency on styled-components, then you might not find it easy to implement.
• Your creativity will be limited because it doesn’t support customization.

React Joyride

The other main product-tour library is React Joyride , which has about 3,100 stars on GitHub and is also actively maintained.

We pass the className as a target and the content. The state stores the tour. The Joyride component uses steps as props.

• Integrating React Joyride in a web app is less rigid than with React Tour, and it has no hard dependency on other libraries.
• Events and actions are made available, which fosters customization.
• It’s frequently improved.
• The UI isn’t as elegant as React Tour’s.

Why React Joyride?

Product tours, especially for really big web apps, require customization , and that sets React Joyride apart from React Tour. The example project we’ll make demands some creativity and customization — hence, we’ll go with React Joyride.

Building A Simple Product Tour

First, we’ll build a simple React tour using the props available to us in React Joyride. Next, we’ll use the useReducer hook to automate the tour’s processes.

Clone the “ standard-tour ” branch in the GitHub repository, or use the web page of your choice, as long as you’re able to follow along.

Install the packages by running npm install .

To start the app, run npm run start .

We’ll be covering the following steps:

• define the tour’s steps;
• enable a skip option in each step;
• change text labels on buttons and links;
• customize styles like button colors and text alignment.

Then, we’ll add some custom features:

• autostart the tour;
• start the tour manually (i.e. with a link or button click);
• hide the blinking beacon.

The props in React Joyride enable us to perform some basic functionality.

For this tutorial, we’ll build a product tour of the UI shown below:

Define The Tour’s Steps

To begin with, ensure that you’re targeting the particular classNames that will hold the content of the tour on the page — that is, according to whether you’ll be using your UI instead of the shopping-cart UI.

In the component folder, create a Tour.js file, and paste the following code into it. Also, ensure that the target classNames exist in your style sheet. Throughout this article, we’ll tweak the Tour.js component to suit the task at hand.

What we’ve done is simply define our tour’s steps by targeting the classNames that will form the bedrock of our content (the text). The content property is where we define the text that we want to see when the tour starts.

Enable Skip Option in Each Step

A skip option is important in cases where a user isn’t interested in a particular tour. We can add this feature by setting the showSkipButton prop to true , which will skip the remaining steps. Also, the continuous prop comes in handy when we need to show the Next button in each step.

Change Text Labels On Buttons And Links

To change the text labels on either buttons or links, we’ll use the locale prop. The locale prop has two objects, last and skip . We specified our last tour as the End tour , while skip is the Close tour .

Customize Styles, Like Button Colors And Text Alignment

The default color of buttons is red, and text alignment is always set right. Let’s apply some custom styles to change button colors and align text properly.

We see in our code that the styles prop is an object. It has other objects with unique values, including:

• tooltipContainer Its key is textAlign , and its value is left .
• buttonNext Its key is backgroundColor , and its value is green .
• buttonBack Its key is marginRight , and its value is 10px .
• locale Its keys are last and skip , and its values are End Tour and Close Tour , respectively.

The library exposes some props to use on our elements in place of the default elements, some of which are:

• beaconComponent
• tooltipComponent

We’ve seen how to create a product tour and how to customize it using the various props of Joyride.

The problem with props, however, is that, as your web app scales and you need more tours, you don’t just want to add steps and pass props to them. You want to be able to automate the process by ensuring that the process of managing tours is controlled by functions, and not merely props . Therefore, we’ll use useReducer to revamp the process of building tours.

In this segment, we are going to take control of the tour by using actions and events , made available by the library through a callback function.

To make this process feel less daunting, we’ll break this down into steps, enabling us to build the tour in chunks.

The complete source code is available, but I’d advise you to follow this guide, to understand how it works. All of our steps will be done in the Tour.js file in the components folder.

Define the Steps

In this first step, we define our steps by targeting the appropriate classNames and setting our content (text).

Define the Initial State

In this step, we define some important states , including:

• Set the run field to false , to ensure that the tour doesn’t start automatically.
• Set the continuous prop to true , because we want to show the button.
• stepIndex is the index number, which is set to 0 .
• The steps field is set to the TOUR_STEPS that we declared in step 1.
• The key field makes the tour re-render when the tour is restarted.

Manage The State With Reducer

In this step, using a switch statement when case is START , we return the state and set the run field to true . Also, when case is RESET , we return the state and set stepIndex to 0 . Next, when case is STOP , we set the run field to false , which will stop the tour. Lastly, when case is RESET , we restart the tour and create a new tour.

According to the events ( start , stop , and reset ), we’ve dispatched the proper state to manage the tour.

Listen to the Callback Changes and Dispatch State Changes

Using the exposed EVENTS , ACTIONS , and STATUS labels offered by React Joyride, we listen to the click events and then perform some conditional operations.

In this step, when the close or skip button is clicked, we close the tour. Otherwise, if the next or back button is clicked, we check whether the target element is active on the page. If the target element is active, then we go to that step. Otherwise, we find the next-step target and iterate.

Autostart the Tour With useEffect

In this step, the tour is auto-started when the page loads or when the component is mounted, using the useEffect hook.

Trigger The Start Button

The function in this last step starts the tour when the start button is clicked, just in case the user wishes to view the tour again. Right now, our app is set up so that the tour will be shown every time the user refreshes the page.

Here’s the final code for the tour functionality in Tour.js :

We’ve seen how to build a product tour in a web UI with React. We’ve also covered some guidelines for making product tours effective.

Now, you can experiment with the React Joyride library and come up with something awesome in your next web app. I would love to hear your views in the comments section below.

• Documentation , React Joyride
• “ Seven Exceptional Product Tours, and the Best Practices They Teach Us ”, Morgan Brown, Telepathy
• “ The Ultimate Guide to Product Tours and Walkthroughs ”, Margaret Kelsey, Appcues

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

@reactour/tour

• 3 Dependencies
• 12 Dependents
• 59 Versions

Tourist Guide into your React Components

This documentation is for the latest release, which uses npm scoped package @reactour . The original reactour is now on branch v1 and its documentation can be found here .

Add the TourProvider at the root of your Application, passing the steps of the elements to highlight during the Tour .

Then somewhere down the Application tree, control the Tour using useTour hook.

The Playground is the perfect place to play aroud with all @reactour Components . Here is an online version.

• Using React Router
• Using React Router with automatic route switching
• Using React Modal
• Using Semantic UI Modal
• Using React Bootstrap Modal
• Tour with data fetching

Feel free to make a PR proposing new sandboxes or demos to add in the playground.

TourProvider

Steps: steptype[].

Array of elements to highlight with special info and props.

selector: string | Element

A string containing one CSS Selector to match and highlight the element at the time of this step.

content: string | ({ setCurrentStep, transition, isHighlightingObserved, currentStep, setIsOpen }) => void

The content to show inside the Popover at the time of this step. Using a function have parameters to use inside content.

position?: 'top' | 'right' | 'bottom' | 'left' | 'center' | [number, number]

The preferred postion to position the Popover in relation with the highlighted element. Will be automatically calculated in case of unavailable space.

highlightedSelectors?: string[]

Array of CSS Selector to be included (by union) in the highlighted region of the Mask .

mutationObservables?: string[]

Array of CSS Selector that addition or removal will triggered a rerender of the Mask shape.

resizeObservables?: string[]

Array of CSS Selector that when resizeing each will triggered a rerender of the Mask shape.

navDotAriaLabel?: string

String to assign to aria-label attribute of the Dot of this step.

stepInteraction?: boolean

Allow to reenable the interaction for this specific step, when disableInteraction (from TourProvider ) is true .

action?: (elem: Element | null) => void

Action fired when the Tour arrives in this step.

actionAfter?: (elem: Element | null) => void

Action fired when the Tour leaves this step.

disableActions?: boolean

Allow to disable all possible actions (interaction with Mask , Navigation Arrows , Navigation Dots , Close button and keyboard events) when the Tour is in this step.

padding?: Padding

Control padding spaces for this specific step.

bypassElem?: boolean

Excludes the main selector when calculating highlited area if present highlightedSelectors .

styles?: StylesObj & PopoverStylesObj & MaskStylesObj

Customize styles fro this specific step.

components?: PopoverComponentsType

Prop to customize granurally each Component inside the Popover .

Components available

Prop to customize styles for the different parts of the Mask , Popover and Tour using a function that allows to extend the base styles an take advantage of some state props.

Style keys and props available

Refer to Mask docs and Popover docs for its specific Components

Tour Components

Extra space to add between the Mask and the Popover and the highlighted element. A single number coordinates both spaces. Otherwise, passing an Object specifying the Component space.

position?: Position

Set a global position for the Popover in all steps, fixed in case of [number, number] , calculated in case of position string

setCurrentStep: Dispatch<React.SetStateAction<number>>

Function to control the Tour current step state.

currentStep: number

Custom Tour current step state.

This option could be overrided on specific steps using stepInteraction prop.

disableInteraction?: boolean | ((clickProps: Pick<ClickProps, 'currentStep' | 'steps' | 'meta'>) => boolean)

Disables the ability to click or interact in any way with the Highlighted element on every step.

disableFocusLock?: boolean

The Tour uses FocusScope in order to lock the focus iteration inside the Popover when Tour is active. This prop allows to disable this behaviour.

disableDotsNavigation?: boolean

Disable interactivity with Dot navigation inside Popover .

disableWhenSelectorFalsy?: boolean

If true, don't show tours when selector or document.getElementById(step.selector) is falsy.

disableKeyboardNavigation?: boolean | KeyboardParts[]

Disable all keyboard navigation events when true , disable only selected keys when array.

default: false

className?: string

Class assigned to Popover .

default: reactour__popover

maskClassName?: string

Class assigned to Mask .

default: reactour__mask

highlightedMaskClassName?: string

Class assigned to highlighted part of Mask . Useful when using disableInteraction .

nextButton?: (props: BtnFnProps) => void

Prevbutton: (props: btnfnprops) => void.

Helper functions to customize the Next and Prev buttons inside Popover , with useful parameters. It is possible to use the base Button and customize the props.

afterOpen?: (target: Element | null) => void

Action fired just after the Tour is open.

beforeClose?: (target: Element | null) => void

Action fired just before the Tour is closed.

onClickMask?: (clickProps: ClickProps) => void

Function that overrides the default close behavior of the Mask click handler. Comes with useful parameters to play with.

onClickClose?: (clickProps: ClickProps) => void

Function that overrides the default close behavior of the Close icon click handler. Comes with useful parameters to play with.

onClickHighlighted?: (e: MouseEventHandler<SVGRectElement>, clickProps: ClickProps) => void

Click handler for highlighted area. Only works when disableInteraction is active. Useful in case is needed to avoid onClickMask when clicking the highlighted element.

keyboardHandler?: KeyboardHandler

Function to handle keyboard events in a custom way.

badgeContent?: (badgeProps: BadgeProps) => any

Function to customize the content of the Badge using helper parameters like the current and total steps and if the Tour is transitioning between steps.

showNavigation?: boolean

Show or hide the Navigation ( Prev and Next buttons and Dots ) inside Popover .

showPrevNextButtons?: boolean

Show or hide Prev and Next buttons inside Popover .

showCloseButton?: boolean

Show or hide the Close button inside Popover .

showBadge?: boolean

Show or hide the Badge inside Popover .

showDots?: boolean

Show or hide dots navigation inside Popover .

scrollSmooth?: boolean

Activate smooth scroll behavior when steps are outside viewport.

inViewThreshold?: { x?: number, y?: number } | number

Tolerance in pixels to add when calculating if the step element is outside viewport to scroll into view.

accessibilityOptions?: A11yOptions

Configure generic accessibility related attributes like aria-labelledby , aria-label for Close button and if show or hide Dot navigation in screen readers.

rtl?: boolean

Option to navigate and show Navigation in right-to-left mode

maskId?: string

Mask ID to pass directly into the Mask component

clipId?: string

Clip ID to pass directly into the Mask component

onTransition?: PositionType

Function to control the behavior of Popover when is transitioning/scrolling from one step to another, calculating with Popover next position and previous one

ContentComponent?: ComponentType<PopoverContentProps>

Completelly custom component to render inside the Popover .

Wrapper?: ComponentType

Element which wraps the Tour, useful in case is needed to port the Tour into a Portal . Defaults to React.Fragment

Later in any Component down in the tree of TourProvider you can control the Tour in many ways

isOpen: Boolean

Is the Tour open or close

The current step. zero based

steps: StepType[]

The Array of steps set currently

setIsOpen: Dispatch<React.SetStateAction<Boolean>>

SetState function open or close Tour

setSteps: Dispatch<React.SetStateAction<StepType[]>>

SetState function to update the Array of steps.

meta: string

Global meta information that could be useful in complex Tour/s situtations

setMeta: Dispatch<React.SetStateAction<string>>

SetState function to update the global meta info.

Warning : Make sure you reset the currentStep value using the setCurrentStep function to ensure the tour will be opened to the correct step after update. Otherwise, in case where a person has already interacted with the tour steps and closed the tours on step 5 for example, they might open to the incorrect step, or similarly if the new set of steps only has 3 steps nothing will open.

In case you needed there is an enhancer that allows you to have all useTour functionalities through a Higher Order Component.

• introduction
• step-by-step
• walkthrough
• tourist-guide
• product-intro
• presentation

Package Sidebar

npm i @reactour/tour

Git github.com/elrumordelaluz/reactour

github.com/elrumordelaluz/reactour/tree/main/packages/tour

Downloads Weekly Downloads

Unpacked size, total files, last publish.

7 months ago

Collaborators

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Tourist Guide into your React Components

elrumordelaluz/reactour

Folders and files, repository files navigation.

Tourist Guide and a set of Assistants to travel into your React Components

Documentation

https://docs.react.tours

@reactour/tour

The main package, which uses the other ones to highlight parts of your application from an array of steps.

@reactour/mask

A customizable Component to highlight certain element or area of the viewport.

@reactour/popover

A customizable Component to attach to an element or position of the viewport to show content.

@reactour/utils

A set of helper functions used by the other packages.

The place where all the stuff is visible working, live here .

Sponsored by

Gold sponsors 🥇.

Reactour is proud to be sponsored by Frigade , a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, and more.

Silver sponsors 🥈

Dopt gives developers UI components and SDKs to build seamless onboarding and education experiences in minutes.

Repo Activity

MIT © Lionel Tzatzkin

Code of conduct

Releases 13, sponsor this project, used by 2.5k.

Contributors 44

• TypeScript 65.9%
• JavaScript 14.4%

Existing customer? Sign in

TUTORIAL: How to create product tours in ReactJS with React Tour

June 18, 2021

Psst! 4,000+ Companies can't be wrong. You can teach your users anything with Nickelled.

As onboarding specialists, we’re often asked about ‘roll your own’ javascript guided tours. We used to recommend a bunch of JS libraries based on jQuery to achieve this, but with most applications nowadays being built as single page apps using frameworks such as ReactJS, we figured it’s time to update our guidance – so this week, we’ll take a look at how to create product tours in ReactJS using React Tour.

For the uninitiated, React Tour (or, to use their spelling, Reactour) is the most popular guided tour component out there for React JS. You can find the Github repo here or the project webpage here . There are other libraries you could use (see our section below), but we’d recommend the Reactour library for most use cases. Also, it looks great:

Why are product tours helpful?

As a reminder, product tours are used to help users to get familiar with the product. They’re often used to introduce new features, or to welcome new users to an app with a quick overview of the user interface.

In this tutorial you’ll learn how to create product tours in ReactJS using the Reactour plugin.

How to create a product tour with ReactJS

Let’s create a React tour and see how it’s done.

First, we need to install the React Tour plugin (find it on Github here ).

In order to use the React Tour we need to import it in our application.

We also need to impact useState, so that we can use a state variable in our functional component.

Above before we render, we’ll set up the constant which contains our steps, and links them to elements (this example is from the Github repo).

You’ll see that steps is an array, containing each step with a selector and content.

Finally, let’s render the tour on the page by creating the component on the page:

We’ve created a heading, two paragraphs and an image, and below them all, we’ve added our Tour component.

Let’s update our steps constant so that we’ve got two steps, one for the heading and one for the picture.

You’ll see that the Tour component is using three properties – the steps (which we’ve defined as a constant), isOpen and onRequestClose , which is executing a function that changes the state of our isTourOpen constant.

With all of this, our tour will now display on the page when it loads (since we’ve set useState to true).

However, we probably want the tour to load when the user clicks a button, rather than just on page load.

To do that, lets add a button component to our page:

<button onClick={setIsTourOpen(true)} title={'Tour'}>

When the user clicks this button, the tour will open up. And our existing code will close it when the user wants to do so.

And there you have it – a simple two-step tour, implemented inside a ReactJS app in five minutes.

Other tour software packages to consider

React joyride.

This highly-recommended alternative comes courtesy of the original Joyride JS library. It’s well-documented and comes with tons of sandbox examples to try.

React Shepherd

React Shepherd is based on the popular Shepherd .js javascript framework for creating tours. It’s a port best suited for websites or applications that are already using a javascript framework like React, and there’s an Ember version available too. It’s not as popular as React Tour, but it’s a good alternative.

Intro.js-React

This is a simple port of Intro.js, which is another well-known javascript library. It’s lightweight, and a good choice if you’re very familiar with intro.js and don’t fancy making a change.

Should I just buy an off-the-shelf solution?

The short answer: It depends on what your goals are.

If you’re looking for a more “plug and play” experience, then it may be best to purchase a solution that is already built. Pre-built solutions (such as Nickelled ) contain tons of extra functionality which using something like Reactour won’t give you.

For example, consider whether you need

• Custom audience triggering
• Maintainability by non-coders
• Team collaboration on content

If you don’t need any of this and want to get hands-on and learn the process of creating a product tour, then it’s perfectly fine to build one from scratch using one of the libraries above.

Need to Teach Your Users?

Our tutorials and other content are like having someone sitting next to you while you learn. Take a free trial and see how we make life better for your users.

Recent Posts

Great SaaS Onboarding Software Solutions for Every Need

Employee Onboarding Software – FAQs We Get

SaaS Onboarding Checklist Best Practices & Examples

SaaS Onboarding Tooltips Best Practices (w/ Examples)

The Best Client Onboarding Software Solutions for Every Use

Millions of users have learned with Nickelled. Why aren't yours among them?

Create guided tours in the React app

by Clue Mediator · February 13, 2021

Today we’ll show you how to create guided tours in the React app.

Sometimes you may need to add a complete guide to your product developed in React . So we will give you the step by step implementation.

Here, we will use the npm package to create tours for sample react application.

Demo Application

Steps to create guided tours in the react app.

• Create a react app using multiple components
• Add npm dependency
• Create guided tours for react app

File Structure

• node_modules
• package-lock.json
• package.json

1. Create a react app using multiple components

First of all, we will create a react web application using multiple components. We will recommend you to check the following article for more information.

Create React Application using Multiple Components

Look at the following file code for your react app.

2. Add npm dependency

Now, we will have a react application and it’s time to add the guided tours in the app. So let’s add the reactour npm dependency in the react app by running the following command.

This package is also required the styled-components and react@^16.3 to use the createRef . Run the following command to install styled-components .

3. Create guided tours for react app

To create guided tours, we have to list out the steps and add the styles for the UI. Here, we will create a separate component called WebTour.js and import it in the root file.

We have also added a few more attributes to design the tour. Refer to this link for more information.

Let’s add the WetTour.js in the App.js component.

Run the application and check the output in the browser.

I hope you find this article is helpful. Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

Tags: React Advanced React Example React Package

You may also like...

Implement server side pagination in React AG Grid

June 5, 2021

 by Clue Mediator · Published June 5, 2021

Carousel Slider in React using react-slick

May 29, 2020

 by Clue Mediator · Published May 29, 2020 · Last modified February 7, 2021

How to cancel a Fetch request in React

June 7, 2023

 by Clue Mediator · Published June 7, 2023

Create bootstrap modal popup using reactstrap

March 13, 2021

 by Clue Mediator · Published March 13, 2021 · Last modified May 10, 2021

How to create a rating component in React

November 9, 2020

 by Clue Mediator · Published November 9, 2020

How to add a DateTime picker in React

December 18, 2023

 by Clue Mediator · Published December 18, 2023

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 Yes! Add me to your newsletter!

Search your query

JOIN OUR NEWSLETTER

Subscribe to our free, once-weekly email filled with coding news & articles.

Thank you for subscribing to us!

Recent Posts

• Design Product Page for Shopping Cart React Application – Part 9 March 14, 2024
• Design Home Page for Shopping Cart React Application – Part 8 March 1, 2024
• Design Footer Component for Shopping Cart React Application – Part 7 February 29, 2024
• Designing a Header Component for a Shopping Cart React Application – Part 6 February 26, 2024
• Add Bootstrap Icons in React Application – Part 5 February 24, 2024

Privacy Overview

Full Stack Soup

Next.js onboarding with reactour (tour.js).

• By - Danny B.
• Posted on June 30, 2022 October 18, 2022
• Posted in Material UI , NextJS , React

Tour.js is a free JavaScript library for user onboarding. This library guides users through complex features of your application. By making an app easier to navigate, you can increase traffic and decrease the bounce rate upon first interaction. This post will go over a simple example of how to run Tour.js on a single page with a MUI components. This demo uses MUI Version 5.x .

Table of Contents

Source Files

Prerequisites.

If you are not using the source files above then get the Next.js template from MUI . You might have to clone the entire repository to get it, but it is worth the effort. The template from MUI has everything configured out of the box and is ready to use. Installing Material manually can be challenging if you are still a novice with Next.js .

https://github.com/mui/material-ui/tree/master/examples/nextjs

React Tour – Onboarding Library

Install Reactour which is a wrapper for Tour.js .

https://www.npmjs.com/package/reactour

Install Styled-Components for Tour.js .

MUI Table Component – (Optional)

Create a component labeled BasicTable under ‘./components’ . Copy the code from MUI (below). This is for the demo page.

https://mui.com/material-ui/react-table/#basic-table

CSS Styling for the Tour

Create a style sheet under ‘./styles’ labeled tour.module.css

The Demo Page

Create the Tour page under ‘./pages ‘ labeled as ‘./pages/tour.js’ .

Below are all of the imports for the demo.

Import reactour Dynamically

Import reactour dynamically since it cannot be rendered on the server.

Single Step Example

Example of a single reactour step. You have the selector and the content you want to display for that step.

Styling to a Step

Event handing for reactour, configuring reactour.

Put the <Tour/> component somewhere in the rendering part of the page.

The following properties are used in this example

accentColor={accentColor}

nRequestClose={closeTour}

All together

All of the source code for the demo page.

Automatically show for first time visitors.

Using the browser’s local storage to store a value when the user has visited the page or application.

Now that you know the basics of Tour.js , try putting the steps in a separate file or decorate the steps with buttons and colors. If Tour.js isn’t for you, check out some of the other onboarding libraries below.

https://introjs.com/

https://react-joyride.com/

Previous Article

Next article.

You must be logged in to post a comment.

• Scroll to top
• Property Management Software
• Food Delivery App Development
• eLearning App Development
• Travel and Hospitality App Development
• On Demand Grocery Delivery
• Taxi Booking App Development
• Telemedicine App Development
• Truck Dispatch Software Development
• Rideshare & Carpooling App Development
• Car Wash App Development
• Employee Transportation App Development
• Home Services App Development
• Appointment Scheduling Software
• Fintech Software Development Companies
• Book an Appointment
• +1(888)-958-2732

13+ Years of Excellence in outsourcing services

85% Repeat Business

• Our Mission
• Our Strength

• Our Methodology
• Value Proposition

• Fixed Price
• Time & Material

• 25+ Employees
• 2 Global Offices

• 2300+ Projects Done
• 1.5+ Development Hours

Listed below are 6 of the best reputated websites and best channels

We're collaborating with some of the largest brands in the world, as well as with startups. We’d love to learn your needs, vision and explore how we can assist exceeding your goals.

• PHP Development
• WordPress Development
• Laravel Development
• Python Development
• Node.js Development
• LAMP Development
• React.js Development
• Angular.js Development
• Javascript Development
• Gatsby.js Development
• Bootstrap Development
• Progressive Web App Development
• Vue.js Development
• Mobile App Development
• React Native Development
• Android Development
• IOS Development
• Flutter Development
• Node.js + Mongo DB
• Fullstack Development
• Artifical Intelligence / ML
• Data Analytics + ML
• IOT Development
• Cloud Computing
• Amazon Web Services
• Digital Transformation
• Data Science Consulting
• Blockchain Development
• AR/VR Development
• Business Process Automation
• Improve Operational Efficiency
• Small Business Consulting
• Enterprise Performance Management
• ecommerce Development
• WooCommerce Development
• Shopify Development
• Magento Development
• BigCommerce Development
• Search Engine Marketing
• Digital Marketing
• SEO Services
• Social Media Marketing
• PPC Services
• UI/UX Designing Services
• Website Designing
• Landing Page Design
• Graphic Designing
• Prototype Designing
• Product Discovery/Blueprints
• Web Development
• Digital Transformation Company
• E-Commerce & Custom Framework Development
• Custom Crm Development
• Wine Ecommerce Technology
• Ecommerce Development Company
• Sofware Engineering Company Toronto
• DevOps Consulting Services in Toronto
• IT Consulting Company
• UI UX Design Services
• Web Design Company
• Product Discovery / Blueprint
• Landing Page Design Services
• Social Media Marketing Services
• Pay-Per-Click Management Services
• IoT Development
• Data Science Consulting Services
• Artificial Intelligence Services
• Deployment, DevOps & Integrations
• Independent Testing (Manual & Automation)
• Twilio Integration
• AR VR Development
• ReactJS Development Company
• GatsbyJS Development
• VueJS Development Services
• Bootrstrap Development
• AngularJS Development
• Node Js Development Services
• Laravel Development Company
• Python Development Company
• WordPress Development Company
• PHP Development Company
• iOS Development
• Flutter app development
• React Native App development
• Managed IT Services
• Engagement Models
• Cloud Security Company
• Agencies and Enterprises
• Food Delivery
• Real Estate
• eCommerce & Retail
• Travel and Hospitality
• Education and Learning
• Fintech Development
• Education & Learning
• Ongoing Dedicated Resources
• Offshore Software Development Company
• Outsourcing Software Development
• Small Business Consulting Services
• DevOps Deployment Tools
• Cloud Security Services
• Deployment, DevOps & Integration
• Cloud infrastructure provisioning
• Cloud infrastructure provisioningg
• Our Portfolio
• Our Case Studies
• Testimonials
• Travel & Hospitality
• Education & eLearning
• Whitepapers
• Corporate Social Responsibility
• Industry Reports
• Press Release
• Mobile App Development Company
• Prototype | MVP Development
• Product Design Company
• User Research & Experience Design
• Digital Marketing Services
• Healthcare App Development
• Travel and The Hospitality Solutions
• QA and Testing
• Clients Testimonials

Start by Marking the Service You Need Help With

How to Create Product Tours in React Apps?

• Published December 8, 2020

Have you ever heard about the product tours in react apps? Product Tours is a fantastic feature in React apps that helps the customers and users to save time and find the customer support related to the UX needs in any applications or software. Product Tours plays an essential role in B2B product UI. Let’s first understand what product tours are?

“PRODUCT TOURS IS AN AMAZING WAY TO INCREASE USER AWARENESS ABOUT SPECIFIC FEATURES IN A WEB APP BY INTEGRATING IT CONCISE, SELF-EXPLANATORY UI TIPS AND TRICKS.”

Product tours help the onboarding users to access the complex and new UX features of any software or web application. It helps the users to save valuable time by accessing these UX tips and tricks. Some famous brands that use the product tours in their software and products are  Slack ,  Trello ,  Asana , and  Invision . Despite the online videos, and FAQs serve the same purpose as product tours did, but they don’t impact enough as the product tours.

Table of Contents

Guidelines of Product Tours in React Apps

Embedding the product tours in react apps is a little bit of a tricky concept, but here are some of the best product tour guidelines to drive results.

Keep it as short as possible

Most of the product tours on react apps are tempting since they contain a lot of information not required by the users. So, try to keep it short and don’t make it a lecture.

To the point

Don’t make it a lengthy process, keep it accurate and to the point. If possible, break it down into smaller pieces of information and provide it to the users.

Don’t make it boring

Before deploying the product tours to your actual app, test it by asking yourself and your team questions. Are you enjoying your product tours on react apps?. What about your teammates? Is it give any value to your users? Now, after coping with the product tour guidelines, let’s know about the existing react libraries for product tours.

React Libraries for Product Tours

In react, the react libraries are the step-by-step instructions regarding the UI and functionalities of the  react web apps and software that add value to the users by guiding them on the complex features and functionalities of the web apps.

React Tour Library

React Tour is the most widely used library in React apps. React Tour has almost 1.4 stars on  Github  and is moderately active on Github. You can use the React tour library if you need the product tour with fewer customizations.

Are you looking for React Js Development Services?

TWS is all ready to provide you best development-related services that will help you achieve the desired results.

How does React Tour Library work?

Using the React Tour library, all you need is to pass the className selector and content for each step to the component.

But if you want to do customizations for the custom behavior, then it won’t work for you.

Pros of React Tour

• A viable option for the tours that need fewer customizations
• It works well for both static and dynamic content.

Cons of React Tour

• It doesn’t support customizations.
• You will find it difficult if your project doesn’t have a dependency on styled-components.

Read More:  Learn React | A Complete Guide for Beginners

React Joystick Library

After React Tour Library, another famous React Library is React Joystick. It has got 3.1k stars on GitHub. Although it allows an extreme level of customization, it still has many limitations.

React Joystick Library’s UI is not as elegant as the UI of React Tours Library.

How does React Joystick Library Works?

Pros of react joystick library.

• It has not hard dependencies on other libraries
• Customization accelerates with the integration of the events and actions.

Cons of React Joystick Library

It doesn’t provide a beautiful UI as the React Tour Libraries offer it.

How to Create a Simple Product Tour in the React app?

After learning about the famous product tours, move on to the next topic of how to create a simple product tour in the react app without any customizations.

Enabling skip option 

Skip options are very important so that the user can skip the product tour if he/she is not interested. Adding the skip option is quite easy in product tours. It only adds this feature by setting the showSkipButton prop to true.

Changing text labels on buttons and links

In product tours, you can also change the text labels on the buttons and links by using the locale prop.

Hiding the Back, Next, and Skip Button

You can also hide the back, next, and skip buttons in the product tours by using props like For Skip Button, use showSkipButton prop For Back Button, use hideBackButton prop For Next Button, use continuous prop

Customizing styles like button colors, and text alignment

You can also make customizations in the react apps using styles like changing the colors of buttons and setting the text’s alignment.

Final Thoughts

I hope you really enjoyed reading the tips and tricks on the product tours and product tours customizations in a react app. You can enhance the user engagements and user experience by providing customer support through the product tours. If you are looking for the  reactjs development services , then contact the reputed reactjs development company, Tekki Web Solutions Pvt. Ltd.

Do you need any assistance in your project?

Discuss your idea with our team and get free consultation and estimation from industry experts.

About the Author

How to develop serverless vuejs application with aws amplify, recent posts.

How does Laravel Web App Development help to Grow Your Business?

Every business wants to have a successful website that helps their business to grow at the next level. Since there...

Top 10 Most Popular React Native Apps

There is no doubt that the JavaScript family is getting popular with time. We all aware of the fact that...

Comparison: ReactJS vs React Native | Which is the best?

Despite Reactjs vs React Native technologies belong to a powerful family, there is widespread confusion between these...

Do you know we offer FREE 30-min consultation?

Drop your CV

We're collaborating with some of the largest brands in the world, as well as with startups. We'd love to learn your needs.

Error: Contact form not found.

Book Appointment

You have any general queries and questions. Let’s Talk, we would love to serve you.

(less than 20MB)

Your information is 101% protected by our non disclosure agreement

Discuss Your Idea With Us

Let us provide you our best opinion.

Book your FREE 30 minutes consultation with:

We are Open for Hiring, Join Us

Send your Resume to let us analyze your experience and skills, submit it here:

Privacy Overview

Find React Tour Examples and Templates

Use this online react-tour playground to view and fork react-tour example apps and templates on codesandbox. click any example below to run it instantly or find templates that can be used as a pre-built solution.

• skip navigation KendoReact Product Bundles DevCraft All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with: NEW : Design Kits for Figma

How to Create Interactive Guided Tours of Web Applications Using React Joyride

Creating interactive guided tours of web apps is an essential tool for improving an application's user experience. That can be easily handled using the React Joyride library. In this post, we look at Joyride and how to incorporate it into a React application.

User experience is critical when talking about the efficiency of web applications. You want to ensure users of your application understand what to do and how to navigate the various sections of the application. Creating an interactive guided tour of your application can solve this issue. It is a self-explanatory way to introduce users to the application and acquaint them with its features.

Although most libraries abstract the inner workings and ease the steps to create interactive guided tours in web applications, the React Joyride library stands out. It is more flexible and allows for some level of customization.

In this post, we will briefly examine the React Joyride library, how it works and how it differs from similar libraries. Additionally, we will create a demo of a landing page and integrate the React Joyride library into it, with some customization. Let’s get started!

Project Setup

Run the following command in your terminal to set up a React application:

Next, run the commands below to navigate into the created project folder and install the React Joyride library.

Run the command below to start your development server:

An Overview of the React Joyride Library

The React Joyride package is well-liked for developing interactive tours of web apps, with more than 5,000 stars on GitHub and an active maintenance system. With React Joyride, users of an application can see its features through an interactive tour, which prompts them to explore specific points of interest and highlights basic functionality.

The React Joyride library targets DOM elements in an application on which it renders a tooltip with the developer-defined description of individual elements. Each tooltip for an element points to and describes the element as defined. Under the hood, the React Joyride library uses react-floater for adequately positioning and styling the tooltip.

Compared to similar libraries, the React Joyride library is less rigid and offers more flexibility and customizability. It allows redefining the library’s theme to meet the application’s requirements. It makes every action and event visible to the user, allowing you to tailor it to your needs. It also includes solutions for the majority of product tour use cases.

To create interactive tours with the React Joyride library, you only need to import its component into your application and pass the required props. In a subsequent section, we will look closely at how we can do this. However, in the next section, let’s create a simple frontend page with which we can work.

Building a Simple Frontend Application

With React installed and our application started, let’s build a demo version of the landing page of an insurance company. After which, we’ll integrate the React Joyride library.

For styling, open the src/App.css file and replace the pre-defined styles with these:

We want a Hero section component for the page that includes a header component. We will also have a Packages component that lists the offers and a Footer component.

In the src folder, create a new folder named components and add a Header.js file to it. Open the src/components/Header.js file and add the following to it:

Here, we defined the Header component. Next, let’s create a Hero.js file in the src/components/ folder and add the code below to it:

Here, we defined the Hero component and rendered the Header component with some dummy text.

Let’s also create a Packages.js file in the src/components folder and add the following to it:

In the code above, we defined a Packages component that returns some sample packages. To add the Footer component, create a Footer.js file in the src/components folder and add the following to it:

Here, we defined the Footer component that renders a simple newsletter form.

Now to bring all these components together, open the src/App.js file and replace the pre-defined code in it with the following:

Here, we imported and rendered the Hero , Packages and Footer components. We also imported the styles we earlier defined in the App.css file.

Save the changes, and preview the application in your browser to see what we have.

Integrating the React Joyride Library

The React Joyride library exports a core Joyride component that we can use to create tours in React applications. The Joyride component expects a required steps prop when rendered. The steps prop is an array of objects used to define the different steps or phases of the tour. The target and content are two essential properties that each object in the array should contain.

The target property accepts a value that points to the appropriate element we want to highlight for a particular step in the tour. It can be a CSS selector or an HTMLElement.

The content property, on the other hand, defines the tooltip’s body. It accepts values that specify the content that gets displayed for the step.

It is important to note that the order by which we define the objects in the steps array is the order by which the tour will go.

To see this in action, replace the content of your src/App.js file like so:

In the code above, we imported and rendered the Joyride component. Then, we defined a steps array and passed it as a prop to the Joyride component. Our tour should have six steps since we defined six objects in the steps array. You can always tweak or change this as you prefer.

Save the changes and test the application in your browser. You should see an animated beacon (a small red-colored circle) on the first element targeted in the steps array. Click on the beacon to start the tour.

Customizing the Tour

As mentioned earlier, one of the advantages of using the React Joyride library is that it is less rigid and allows for customization to a greater extent. In addition to the steps prop, some other props make these customizations a breeze.

In the subsequent sections, we will take a look at some of the other props. However, before we continue, let’s quickly solve a behavioral issue with our tour. You should have noticed that you need to close each step in the tour before moving to the next. The Joyride component also accepts a continuous prop that can be used to solve this. It takes a boolean value that keeps the tour moving when set to true .

Open your src/App.js file and update the Joyride component as shown below:

With that done, you should see a next button that may be used to continue the tour without needing to close it at intervals.

Adding Custom Styles

The current state of our tour shows that the general default theme of the Joyride component does not correspond with the theme of our application. The component also accepts styles props for overriding some default styles. To adjust the overall theme, however, we must nest a special options object within the styles object. Here is the default options object, as seen in the official documentation .

The overall theme takes these values, so to override any of the styles, we need to define it in our options object nested in the styles object and passed as a prop to the Joyride component.

In addition to changing the styles of the overall theme, we can also override the styles of some of the components that come with the Joyride component. For example, we can override the styles for the spotlight , the tooltip component, the beacon component, etc. We only need to define the styles object for each component and add them to the styles object. Click here to see all overridable components defined by the React Joyride library.

Open the src/App.js file and update the Joyride component like so to override some of the default styles:

Here, we changed some styles for the overall theme and the spotlight component to align with the styles of the page.

Save the changes and test the application to see the changes.

Show Tour Progress

To show the tour’s progress, the Joyride component also accepts a showProgress prop. When set to true , the prop displays how far the user has gone with the tour.

We added a new showProgress prop to display the tour’s progress at each step.

Save the file to see the changes in your browser.

Enabling Skip at Each Step

A particular user might already be familiar with the application and immediately want out of the tour. The Joyride component also accepts a showSkipButton prop that, when set to true , adds a skip button that can be used to exit the tour immediately.

Note that the cancel button at the top right of each tooltip only exits a particular step and moves to the next step. The skip button ends the tour entirely.

Open your src/App.js file and update the Joyride component like so:

Here, we added the showSkipButton prop to add a skip button at each step.

Automatically Start Tour on Page Load

Up to this point, we have always had to click on the beacon to start the tour. We can also define the tour to kick-start automatically after the page loads. To effect this, we only need to add a disableBeacon property to the first step of the tour defined in the steps array. When set to true, the disableBeacon property auto-starts the tour on page load.

Open your src/App.js file and update the steps array as shown below:

Here, we added the disableBeacon property to the first step object and set its value to true .

Creating interactive guided tours of web apps is an essential tool for improving an application’s user experience. That can be easily handled using the React Joyride library. In this post, we looked at the React Joyride library and how to incorporate it into a React application. However, you can take this further by diving into the official documentation to learn about other cool things you can do with the library.

Ifeoma Imoh

Ifeoma Imoh is a software developer and technical writer who is in love with all things JavaScript. Find her on Twitter  or YouTube .

Related Posts

List of useful premade react hooks, using typescript in react, understand how rendering works in react, all articles.

• ASP.NET Core
• ASP.NET MVC
• ASP.NET AJAX
• Blazor Desktop/.NET MAUI
• Design Systems
• Document Processing
• Accessibility

Latest Stories in Your Inbox

Subscribe to be the first to get our expert-written articles and tutorials for developers!

All fields are required

Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.

You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info

By submitting this form, I understand and acknowledge my data will be processed in accordance with Progress' Privacy Policy .

I agree to receive email communications from Progress Software or its Partners , containing information about Progress Software’s products. I understand I may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication received.

By submitting this form, you understand and agree that your personal data will be processed by Progress Software or its Partners as described in our Privacy Policy . You may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication sent by us or our Partners.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here .

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here .

.css-s5s6ko{margin-right:42px;color:#F5F4F3;}@media (max-width: 1120px){.css-s5s6ko{margin-right:12px;}} Discover how today’s most successful IT leaders stand out from the rest. .css-1ixh9fn{display:inline-block;}@media (max-width: 480px){.css-1ixh9fn{display:block;margin-top:12px;}} .css-1uaoevr-heading-6{font-size:14px;line-height:24px;font-weight:500;-webkit-text-decoration:underline;text-decoration:underline;color:#F5F4F3;}.css-1uaoevr-heading-6:hover{color:#F5F4F3;} .css-ora5nu-heading-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;color:#0D0E10;-webkit-transition:all 0.3s;transition:all 0.3s;position:relative;font-size:16px;line-height:28px;padding:0;font-size:14px;line-height:24px;font-weight:500;-webkit-text-decoration:underline;text-decoration:underline;color:#F5F4F3;}.css-ora5nu-heading-6:hover{border-bottom:0;color:#CD4848;}.css-ora5nu-heading-6:hover path{fill:#CD4848;}.css-ora5nu-heading-6:hover div{border-color:#CD4848;}.css-ora5nu-heading-6:hover div:before{border-left-color:#CD4848;}.css-ora5nu-heading-6:active{border-bottom:0;background-color:#EBE8E8;color:#0D0E10;}.css-ora5nu-heading-6:active path{fill:#0D0E10;}.css-ora5nu-heading-6:active div{border-color:#0D0E10;}.css-ora5nu-heading-6:active div:before{border-left-color:#0D0E10;}.css-ora5nu-heading-6:hover{color:#F5F4F3;} Read the report .css-1k6cidy{width:11px;height:11px;margin-left:8px;}.css-1k6cidy path{fill:currentColor;}

• Engineering |
• Architecting product tours in React: Ho ...

Architecting product tours in React: How we moved fast without leaving a trail of tech debt

One of the most critical areas of Product Engineering that we have at Asana is First Experience (FX). The FX team’s mission to make users’ first seconds in Asana flawless. This team’s work is so crucial to our growth because the first few moments that someone uses Asana for the first time can make or break their propensity to continue using the product. With fewer than 10 members, the FX team knows how to have a big impact in a short amount of time.

Today, any new Asana user will have a guided, seamless experience to help them understand the most important parts of the product in the quickest amount of time. But it wasn’t always this way:

The first time you used Asana, there was something important that you probably missed. It was an egg, hidden in plain sight.

A complex set of algorithms create this egg. As you were signing up for Asana, these algorithms were making deductions about you. They were asking,

Who is this person?

What is their role on the team?

What do they need to do in the first 60 seconds of using Asana to make their team successful?

The algorithms balanced a dizzying set of data points and inputs to make a decision. And then they laid an egg.

A NUX egg, to be precise. At least, that’s what we call them (the “NUX” stands for “New User Experience”). It’s a rounded arrow colored in a cheery shade of orange-coral (or “corange”). The arrow points to the first thing that you should do when you use Asana. It oscillates gently to draw your attention. Follow the trail of NUX eggs, and you’re far more likely to achieve great things with Asana. They’re kind of a big deal.

But we know that you probably didn’t follow the NUX eggs.

And that’s because almost no one does. Asana has displayed these tours for years, but only one percent of new users have ever completed them. The other 99 percent ignore the NUX eggs. They’re left to hover sadly in the product, their purpose unfulfilled.

This was the problem that the First Experience (FX) team faced earlier this year.

It wasn’t going to be easy. The codebase supporting NUX eggs was brittle and difficult to change. There were a dizzying array of different use cases to support. And it was all written in a legacy framework that was no longer supported or well-understood.

1. Experimenting in the legacy framework

The team started to plan. Most of Asana’s application frontend is written in React and Typescript. That stack provides a lot of stability and performance. But not the NUX eggs. The NUX eggs are written in Luna1, Asana’s legacy web application framework. Few Asana engineers are proficient in Luna1 these days, which makes those features pretty hard to change.

And change was exactly what the team needed. There was still a lot that they didn’t know about why users didn’t engage with the NUX eggs. To find out, they would need to run several experiments. Those experiments would help them learn how to optimize the user experience.

Running all these experiments on Luna1 code was dangerous. The last thing the team wanted was page-breaking bugs. It was crucial that a user’s first experience was stable. The new stack had better static analysis and testing in place. Experimentation would be much safer in that environment.

But porting the NUX egg to the new stack was a huge risk. The team didn’t know whether  any  of the experiments would show improvements in user engagement. What if the best answer was to not have a product tour at all? That would mean weeks of wasted effort in architecting a new system.

The FX team thought deeply about these pros and cons. They then decided on a counter-intuitive solution. They would run an experiment on top of Luna1 first. Then, if the results looked promising, they would invest in long-term architecture.

They introduced a new React component called the IPE Bar (“in-product education”). The IPE Bar is a purple box that slides up from the bottom of the screen while the user sees the NUX Egg. It lists instructions to reinforce the action that the NUX egg is asking the user to perform. The tour would seem to take over the whole screen.

The IPE Bar was written in React and Typescript. However, it still needed to be able to talk to the Luna1 NUX eggs implementation to stay in sync. The FX team built a bridge that connected the IPE Bar to the legacy application state stored by the NUX eggs. The NUX eggs, for their part, didn’t need to undergo any changes at all for the experiment. Well, besides a simple new purple coat of paint.

They ran the AB test for several weeks before looking at the data. The results showed a significant improvement in user engagement metrics. The experiment worked.

2. Reimagining the architecture

Product tours are gnarly. They need to form a coherent experience. Each step and arrow behaves in a uniform, predictable way. A given arrow or indicator knows to disappear when the button it’s pointing to is clicked. To do this, they also need to be aware of the internal state of many different parts of the app.

How do you reconcile those two things?

The NUX Eggs tried a clever approach to this problem. NUX Eggs encode a list of DOM selectors pairs with names of log events. A given arrow would search for the DOM element (something like #new-task-button). It would then wait for a log event to trigger (for example, NewTaskButtonClicked). Then it would mark that step as completed and proceed for the next arrow.

This seemed like a good idea at first. But this means the elements of the UI have no explicit knowledge of the product tour. So, if you changed a UI element, its NUX eggs would get lost and confused. The UI elements were implicitly coupled to the implementation of the product tours. The bugs were frequent and annoying to fix.

The FX team learned from these problems. They addressed them in a new product tour system called Coachmarks. Coachmarks don’t use DOM selectors to find elements. Instead, they use a React component which wraps around the target element.

This more explicit coupling requires a bit more boilerplate. This is a good thing. It means that engineers are far less likely to break coachmarks by accident.

They no longer relied on log events to dismiss Coachmarks. Instead, they used an explicit Coachmark service object. When the user clicks the button, you invoke an explicit method to dismiss the coachmark. This explicit coupling makes it a lot harder to break a product tour by accident.

The Coachmark system doesn’t completely solve the problems inherent to product tours. But it makes these problems easier to predict and debug. All you have to do is follow the explicit display and event logic.

3. Instrumenting for high performance

With the Coachmarks system in place, the FX team was ready to launch some brand-new product tours. But one tour they worked on required the application to load a bit more data to initialize itself.

Asana Engineering has a very high standard for application performance. We selected the new stack with performance as a top priority. And many teams spent considerable effort using the new stack to help Asana load twice as fast last year. Asana is fast for now, but it doesn’t take many performance regressions to slide back into poor performance.

Aigerim Karabekova, an engineer on the FX team, wanted to prevent these performance regressions. So, she added performance instrumentation to her new feature. She especially wanted to confirm that this additional data loading had a negligible change in load times. So she had to dive deeper into how we loaded data.

This spring, Aigerim had only been at Asana for a few months. She was an experienced engineer, but she had never worked on a system quite like Asana’s. To be successful, she needed to learn the nuances of Asana’s data loading architecture.

Asana loads its data in groups called projections. But if Aigerim had simply added her new field to the projection, she wouldn’t have been able to AB test the performance of her change. The new data field would have always been loaded, whether the user was in the experiment or not.

To solve this problem, Aigerim needed to make an unusual parameterized projection. This is a projection that conditionally loads one of its sub-branches. With that in place, she was able to only load the data when it was needed for a particular experiment.

Aigerim launched her new Coachmarks tour to real users in production. She then carefully analyzed the performance characteristics. She found that users seeing her new tour did not experience slower load times than other users.

Coachmarks and guideposts

These days, 30 times as many users complete their Coachmarks tour than ever completed the old NUX eggs tour. And the FX team has a solid technical foundation for product tours. Now, they can experiment with an endless variety of new tours in the future.

The team was able to manage the risk of their changes by testing their theories early in development. They also kept a commitment to sustainable architecture and reducing tech debt. By striking this balance, they were able to improve the product while also paving the way for years of experimentation in the future.

If you’re interested in working on challenging technical problems like this one, then you should  .css-1h4m35h-inline-regular{background-color:transparent;cursor:pointer;font-weight:inherit;-webkit-text-decoration:none;text-decoration:none;position:relative;color:inherit;background-image:linear-gradient(to bottom, currentColor, currentColor);-webkit-background-position:0 1.19em;background-position:0 1.19em;background-repeat:repeat-x;-webkit-background-size:1px 2px;background-size:1px 2px;}.css-1h4m35h-inline-regular:hover{color:#CD4848;-webkit-text-decoration:none;text-decoration:none;}.css-1h4m35h-inline-regular:hover path{fill:#CD4848;}.css-1h4m35h-inline-regular svg{height:10px;padding-left:4px;}.css-1h4m35h-inline-regular:hover{border:none;color:#CD4848;background-image:linear-gradient( to bottom, #CD4848, #CD4848 );} .css-lbe3uk-inline-regular{background-color:transparent;cursor:pointer;font-weight:inherit;-webkit-text-decoration:none;text-decoration:none;position:relative;color:inherit;background-image:linear-gradient(to bottom, currentColor, currentColor);-webkit-background-position:0 1.19em;background-position:0 1.19em;background-repeat:repeat-x;-webkit-background-size:1px 2px;background-size:1px 2px;}.css-lbe3uk-inline-regular:hover{color:#CD4848;-webkit-text-decoration:none;text-decoration:none;}.css-lbe3uk-inline-regular:hover path{fill:#CD4848;}.css-lbe3uk-inline-regular svg{height:10px;padding-left:4px;}.css-lbe3uk-inline-regular:hover{border:none;color:#CD4848;background-image:linear-gradient( to bottom, #CD4848, #CD4848 );} work with us at Asana !

Related articles.

How Asana makes me a more effective engineering manager

Asana Engineering Growth Paths

Revamping engineering manager onboarding at Asana

Grow your leadership impact as a tech lead or engineering manager.

Properties to customize the Tour

Type: StepType[]

Array of elements to highlight with special info and props.

components?

Type: PopoverComponentsType

Customize granurally each Component inside the Popover .

Available Components and its props

Type: StylesObj & PopoverStylesObj & MaskStylesObj

Prop to customize styles for the different parts of the Mask, Popover and Tour using a function that allows to extend the base styles an take advantage of some state props.

Styles keys and its props available to customize. Refer to Mask docs and Popover docs for its specific styles keys

Type: Padding

Extra space to add between the Mask and the Popover and the highlighted element. A single number coordinates both spaces. Otherwise, passing an Object specifying the Component space.

Type: number | { mask?: ComponentPadding, popover?: ComponentPadding, wrapper?: ComponentPadding }

Calculation is based on padding shorthand syntax (opens in a new tab)

Type: Position

Set the global position value for the Popover in all steps

Type: 'top' | 'right' | 'bottom' | 'left' | 'center' | [number, number] | ((postionsProps: PositionProps, prevRect: RectResult) => Position)

Fixed in case of [number, number] , calculated prefered position in case of string .

setCurrentStep?

Type: Dispatch<React.SetStateAction<number>>

Function to control the Tour current step state.

currentStep?

Type: number

Custom Tour current step state.

disableInteraction?

Type: boolean | ((clickProps: Pick<ClickProps, 'currentStep' | 'steps' | 'meta'>) => boolean)

Disables the ability to click or interact in any way with the Highlighted element on every step.

This option can be overrided on specific steps using stepInteraction prop.

disableFocusLock?

Type: boolean

The Tour uses FocusScope (opens in a new tab) in order to lock the focus iteration inside the Popover when Tour is active. This prop disables this behaviour.

disableDotsNavigation?

Disable interactivity with Dot navigation inside Popover .

disableWhenSelectorFalsy?

If true, don't show tours when selector or document.getElementById(step.selector) is falsy.

disableKeyboardNavigation?

Type: boolean | KeyboardParts[]

Default: false

Disable all keyboard navigation events when true, disable only selected keys when array.

Type: 'esc' | 'left' | 'right'

Type: string

Default: reactour__popover

CSS classname (opens in a new tab) assigned to the Popover

maskClassName?

Default: reactour__mask

CSS classname (opens in a new tab) assigned to the Mask

highlightedMaskClassName?

CSS classname (opens in a new tab) assigned to highlighted part of the Mask . Useful when using disableInteraction .

nextButton?

Type: (props: BtnFnProps) => void

Helper functions to customize the Next button inside Popover , with useful parameters. It is possible to use the base Button and customize the props.

prevButton?

Helper functions to customize the Prev button inside Popover , with useful parameters. It is possible to use the base Button and customize the props.

Type: (target: Element | null) => void

Action fired just after the Tour is open.

beforeClose?

Action fired just before the Tour is closed.

onClickMask?

Type: (clickProps: ClickProps) => void

Function that overrides the default close behavior of the Mask click handler. Comes with useful parameters to play with.

onClickClose?

Function that overrides the default close behavior of the Close icon click handler. Comes with useful parameters to play with.

onClickHighlighted?

Type: (e: MouseEventHandler<SVGRectElement>, clickProps: ClickProps) => void

Click handler for highlighted area. Only works when disableInteraction is active.

Useful in case is needed to avoid onClickMask when clicking the highlighted element.

keyboardHandler?

Type: KeyboardHandler

Function to handle keyboard events in a custom way.

Type: (e: KeyboardEvent, clickProps?: ClickProps, status?: { isEscDisabled?: boolean, isRightDisabled?: boolean, isLeftDisabled?: boolean }) => void

badgeContent?

Type: (badgeProps: BadgeProps) => any

Function to customize the content of the Badge using helper parameters like the current and total steps and if the Tour is transitioning between steps.

showNavigation?

Show or hide the Navigation (Prev and Next buttons and Dots) inside Popover .

showPrevNextButtons?

Show or hide Prev and Next buttons inside Popover .

showCloseButton?

Show or hide the Close button inside Popover .

Show or hide the Badge inside Popover .

Show or hide dots navigation inside Popover .

scrollSmooth?

Activate smooth scroll behavior when steps are outside viewport.

inViewThreshold?

Type: { x?: number, y?: number } | number

Tolerance in pixels to add when calculating if the step element is outside viewport to scroll into view.

accessibilityOptions?

Type: A11yOptions

Configure generic accessibility related attributes like aria-labelledby (opens in a new tab) , aria-label (opens in a new tab) for Close button and if show or hide Dot navigation in screen readers.

Option to navigate and show Navigation in right-to-left mode

String to be assigned to the <mask /> element (otherwise an automatic unique id) of Mask Component

String to be assigned to the <clipPath /> element (otherwise an automatic unique id) of Mask Component

onTransition?

Type: PositionType

Function to control the behavior of Popover when is transitioning/scrolling from one step to another, calculating with Popover next position and previous one.

Type: (postionsProps: PositionProps, prev: RectResult) => 'top' | 'right' | 'bottom' | 'left' | 'center' | [number, number]

ContentComponent?

Type: ComponentType<PopoverContentProps>

Completelly custom component to render inside the Popover .

Type: ComponentType

Default: React.Fragment

Element which wraps the Tour. Useful in case is needed to port the Tour into a Portal (opens in a new tab) .