Software

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

June 18, 2021

React Tour Tutorial hero image

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:

Reactour screenshot

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

npm install --save reactour

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.

import React, { useState } from "react"
import Tour from 'reactour'

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

const steps = [ { selector: ".first-step", content: "This is my first step", }, // ... ];

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:

const App = () => {
  const [isTourOpen, setIsTourOpen] = useState(true);

  return (
    <>
      <h1 id="heading">Hello world</h1>
      <p>This is a page</p>
      <img id="picture" src="https://via.placeholder.com/300" />
      <p id="explainer">Click here to start the tour.</p>
      <Tour
        steps={steps}
        isOpen={isTourOpen}
        onRequestClose={() => setIsTourOpen(false)}
      />
    </>
  );
};

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.

    const steps = [
      {
        selector: "#heading",
        content: "This is my first step",
      },
      {
        selector: "#picture",
        content: "This is my second step",
      },
    ];

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

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 screenshot

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

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

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.