React.js Onboarding Using Intro.js

A demonstration of the basic usage of Intro.js

While working on an open-source project (Care Amarillo), I was looking for a way to guide users that are new. I’ve used Intro.js before so I searched and found a React wrapper for it. I will demonstrate the basic usage of this package.
intro.js-react

Here is a small example of what we want to achieve:

First, let’s create a blank react app. I am using create-react-app to set up boilerplate code. If you don’t have it already you can refer to the docs here:
GitHub – facebook/create-react-app: Set up a modern web app by running one command.

Run the command in the terminal (Make sure you are in the root directory of this project):

npx create-react-app onboarding

Note “onboarding” is the name I gave the React app.

After that finishes building you can run the app using this command in the terminal:

npm start

You will see the initial template like so:

Next open App.js.

The code initially is this:

import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit src/App.js and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

Let’s change it to this:

import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <div id="buttonRow">
        <button id="help">Help</button>
        <button id="about">About</button>
        <button id="contact">Contact Us</button>
      </div>
    </div>
  );
}
export default App;

Notice we removed the header element and added a row of buttons.

Next, open the App.css file and add the buttonRow CSS:

#buttonRow{
  display: flex;
  justify-content: space-evenly;
  padding: 8px;
}

Next, we need to install the intro.js react package. Run this command in your terminal:

npm i intro.js-react

Open App.js again and add these two imports:

import { Steps } from 'intro.js-react';
import React, {useState} from 'react';

Now right above buttonRow add the Intro.js Step component:

<Steps
    enabled={enabled}
    steps={steps}
    initialStep={initialStep}
    onExit={onExit}
/>

The full HTML should be this:

<div className="App">
    <Steps
        enabled={enabled}
        steps={steps}
        initialStep={initialStep}
        onExit={onExit}
     />
     <div id="buttonRow">
        <button id="help">Help</button>
        <button id="about">About</button>
        <button id="contact">Contact Us</button>
     </div>
</div>

Since App.js is a functional component we will use hooks for enabled, steps, and initialStep. Add this code right above the code that returns your HTML.

const [enabled,setEnabled] = useState(true)
const [initialStep,setInitialStep] = useState(0)

const onExit = () => {
    setEnabled(false)  
}
const steps = [
    {
      element: '#help',
      intro: 'You can use this button for help',
      position: 'right',
    },
    {
      element: '#about',
      intro: 'You can use this button to get more information',
    },
    {
      element: '#contact',
      intro: 'You can use this button to contact us',
    },
];

We’ve set enabled to true and initialStep to 0. This will automatically make Intro.js whenever the user gets to this screen. The onExit function disables the Intro.js after we exit.

The steps object defines our steps. In our case, we use id’s but the package supports other selectors as well. Intro defines the message we want for each step.

Reload the page and this should be your result:

Here is the full source code for App.js :

import './App.css';
import 'intro.js/introjs.css';
import { Steps } from 'intro.js-react';
import React, {useState} from 'react';
function App() {
    const [enabled,setEnabled] = useState(true);
    const [initialStep,setInitialStep] = useState(0);

    const onExit = () => {
        setEnabled(false)
    }

    const steps = [
        {
            element: '#help',
            intro: 'You can use this button for help',
            position: 'right',
        },
        {
            element: '#about',
            intro: 'You can use this button to get more information',
        },
        {
            element: '#contact',
            intro: 'You can use this button to contact us',
        },
    ];

    return (
        <div className="App">
            <Steps
              enabled={enabled}
              steps={steps}
              initialStep={initialStep}
              onExit={onExit}
            />
            <div id="buttonRow">
                <button id="help">Help</button>
                <button id="about">About</button>
                <button id="contact">Contact Us</button>
             </div>
        </div>
     );
}

export default App;

Thank you for taking the time to read this article!