react tour selector

• 8 Dependencies
• 70 Dependents
• 66 Versions

Tourist Guide into your React Components

From v1.9.1 styled-components it isn't bundled into the package and is required styled-components@^4 and react@^16.3 due to the use of createRef , so:

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.

Add the Tour Component in your Application, passing the steps with the elements to highlight during the Tour .

accentColor

Change --reactour-accent (defaults to accentColor on IE) css custom prop to apply color in Helper , number, dots, etc

Type: string

Default: #007aff

badgeContent

Customize Badge content using current and total steps values

Content to be rendered inside the Helper

Type: node | elem

Custom class name to add to the Helper

closeButtonAriaLabel

aria-label attribute for the close button (for accessibility)

Default: 'Close'

closeWithMask

Close the Tour by clicking the Mask

Default: true

disableDotsNavigation

Disable interactivity with Dots navigation in Helper

disableInteraction

Disable the ability to click or intercat in any way with the Highlighted element

disableKeyboardNavigation

Disable all keyboard navigation (next and prev step) when true, disable only selected keys when array

Type: bool | array(['esc', 'right', 'left'])

getCurrentStep

Function triggered each time current step change

Programmatically change current step after the first render, when the value changes

Type: number

highlightedMaskClassName

Custom class name to add to the element which is the overlay for the target element when disableInteraction

inViewThreshold

Tolerance in pixels to add when calculating if an element is outside viewport to scroll into view

Required: true

lastStepNextButton

Change Next button in last step into a custom button to close the Tour

maskClassName

Custom class name to add to the Mask

Extra Space between in pixels between Highlighted element and Mask

Default: 10

Renders as next button navigation

Overrides default nextStep internal function

onAfterOpen

Do something after Tour is opened

onBeforeClose

Do something before Tour is closed

onRequestClose

Function to close the Tour

Renders as prev button navigation

Overrides default prevStep internal function

Beautify Helper and Mask with border-radius (in px)

scrollDuration

Smooth scroll duration when positioning the target element (in ms)

scrollOffset

Offset when positioning the target element after scroll to it

Default: a calculation to the center of the viewport

showButtons

Show/Hide Helper Navigation buttons

showCloseButton

Show/Hide Helper Close button

showNavigation

Show/Hide Helper Navigation Dots

showNavigationNumber

Show/Hide number when hovers on each Navigation Dot

Show/Hide Helper Number Badge

Starting step when Tour is open the first time

Array of elements to highligt with special info and props

Type: shape

Steps shape

Steps example.

Value to listen if a forced update is needed

updateDelay

Delay time when forcing update. Useful when there are known animation/transitions

disableFocusLock

Disable FocusLock component.

Default: false

To guarantee a cross browser behaviour we use body-scroll-lock .

Import the library

Create the event handlers

Then assign them into the Tour props

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

Package Sidebar

npm i reactour

Git github.com/elrumordelaluz/reactour/tree/v1

github.com/elrumordelaluz/reactour/tree/v1

Downloads Weekly Downloads

Unpacked size, total files, last publish.

24 minutes ago

Collaborators

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:.

CSS Hooks and the state of CSS-in-JS

Explore the evolution of CSS-in-JS and CSS Hooks, a React-based solution that simplifies dynamic styling and component encapsulation.

How Waku compares to Next.js

Waku is a new lightweight React framework built on top of React Server Components (RSCs). Let’s compare Waku with Next.js in this article.

Mojo CSS vs. Tailwind: Choosing the best CSS framework

Compare the established Tailwind CSS framework with the newer Mojo CSS based on benchmarks like plugins, built-in components, and more.

Leader Spotlight: Riding the rocket ship of scale, with Justin Kitagawa

We sit down with Justin Kitagawa to learn more about his leadership style and approach for handling the complexities that come with scaling fast.

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 examples

Basic example.

This is the minimal example

Example to show the customizable behavior of the Mask click event . Try clicking the Mask and the Tour will proceed to the next step.

Close click

Example to show the customizable behavior of the Close click event . Try clicking the 'x' and the Tour will proceed to the next step.

Disable Keyboard

Example to show how to disable keyboard behavior .

Scroll Smooth

Use smooth scroll between steps if they aren't visible in viewport

Custom wrapper, mask and popover paddings

Prev and Next buttons

Custom Prev and Next button

Custom handlers

Control currentStep externally. Useful when using global state.

Custom styles

Custom Tour, Mask and Popover components and parts styles

Disable Scroll

In this example, we are using afterOpen prop to lock the Y scroll and re-enable it through beforeClose prop.

Custom Badge

Create a custom Badge content

Disable dots navigation

Disable navigating through click in dots buttons

Disable interaction

Disable highlighted area interaction . This example shows how to disable the default behavior and how to add an extra functionality when clicking this area. Try to select the highlighted text.

Toggle navigation parts

Toggle Navigation parts as you want: badge , close button , prev & next buttons , dots or whole navigation zone.

Start Tour at specific step. Keep in mind that the number is zero based, so 2 is the third step.

ReactScript

Tourist guide for react – reactour.

The Reactour component lets you create an interactive guided tour for your web app.

Installation:

Import the component.

Add the component (with your own tours) to your web app.

Default props.

Download Details:

Author : elrumordelaluz

Live Demo : View The Demo

Download Link : Download The Source Code

Official Website : https://github.com/elrumordelaluz/reactour

License : MIT

Related Posts