Build Product Tours for your React App

Published in

Newton School

4 min readSep 9, 2021

Quick Summary:

Showcasing new product features to users can get tedious. In this article, you’ll learn how to onboard users into a new UX and how to familiarize them with UI functionality while keeping them engaged.

Introduction:

Product tours are powerful tools to introduce users to a new product and to help them find their bearings. Product tours can be used to showcase high-value features that are being underused.

In this article, you’ll learn about building product tours in React App.

There exist many libraries for implementing tours in your React app. We are going to stick to React Joyride.

Why React Joyride? You might ask.

Product tours, especially for really big web apps, require customization, and that sets React Joyride apart from other libraries.

Building A Simple Product Tour

We’ll be covering the following steps:

Define tour steps
Enable Action buttons in each step
Customize styles
Auto Start the tour
Start tour manually
Handling state switch

Define Steps for the Tour

To begin with, ensure that you’re targeting the particular elements that will hold the content of the tour on the page. You can do this by specifying the query selector like we have done below:

import React from "react";
import JoyRide from "react-joyride";
const TOUR_STEPS = [
        {
          content: <h2>Let's begin our journey!</h2>,
          placement: 'center',
          target: 'body',
        },

        {
          content: 'These are our super awesome projects!',
          placement: 'bottom',
          styles: {
            options: {
              width: 300,
            },
          },
          target: '.demo__projects h2',
          title: 'Our projects',
        }
      ]

Enable Actions In Each Step

Next, Back Button

To display these buttons, send continuous={true}

const Tour = () => {
  return (
    <>
      <JoyRide steps={TOUR_STEPS} continuous={true} />
    </>
  );
};

Skip Button

const Tour = () => {
  return (
    <>
      <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} />
    </>
  );
};

Customize Styles

const Tour = () => {
  return (
    <>
      <JoyRide
        steps={TOUR_STEPS}
        continuous={true}
        showSkipButton={true}
        styles={{
          buttonNext: {
            // Styles for Next button
          },
          buttonBack: {
          //Styles for Back Button
          }
        }}
      />
    </>
  );
};

Auto-start the Tour

If you are using v1, an autostart prop will fulfill the purpose.

However, this prop was deprecated in subsequent versions. From v2 onwards you need to add disableBeacon: true to the first step of the TOUR_STEPS array and it will autoStart the tour.

Manually Starting the Tour

In order to trigger the tour manually, we need to keep track of user intentions. We need to keep the state to know if the tour has been triggered manually

const [isRunning, setIsRunning] = useState(false);


<Joyride run={isRunning} {...remainingProps}/>

There can be various cases of the tour that you might need to manage. Refer to this example to manage tours manually.

Handling State

There might be instances where you may want to change the state and then mount the step. For Example, You have a sidebar that is initially collapsed. You want to show functionality from the sidebar. To achieve that, you must guide the user to open the sidebar and then focus on the required element.

To achieve that using Joyride, you can define the steps as follows:

const TOUR_STEPS=[
          {
            content: (
              <div>
                You can interact with your own components through the spotlight.
                <br />
                Click the menu above!
              </div>
            ),
            disableBeacon: true,
            disableOverlayClose: true,
            hideCloseButton: true,
            hideFooter: true,
            placement: 'bottom',
            spotlightClicks: true,
            styles: {
              options: {
                zIndex: 10000,
              },
            },
            target: this.menu!,
            title: 'Menu',
          },
          {
            content: 'This is our sidebar, you can find everything you need here',
            placement: 'right',
            spotlightPadding: 0,
            styles: {
              options: {
                zIndex: 10000,
              },
            },
            target: this.sidebar!,
            title: 'Sidebar',
          },
          {
            content: 'Check the availability of the team!',
            placement: 'bottom',
            styles: {
              options: {
                zIndex: 10000,
              },
            },
            target: this.calendar!,
            title: 'The schedule',
          },