Home React.js Onboarding Using Intro.js
Post
Cancel

React.js Onboarding Using Intro.js

Overview

alt-text-here

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

alt-text-here

What You’ll Learn

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 wrapper

Best book to learn React.js

Also, check out this video tutorial on implementing Intro.js in your react app:

Getting Started

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:

create-react-app documentation

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

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

1
npm start

You will see the initial template like so:

alt-text-here

Implementing Intro.js elements

Duration: 3

Next open the App.js file. The code initially is this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
          <code>src/App.js</code>
          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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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:

1
2
3
4
5
#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:

1
npm i intro.js-react

Open App.js again and add these two imports:

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

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

1
2
3
4
5
6
7
<Steps
  enabled={enabled}
  steps={steps}
  initialStep={initialStep}
  onExit={onExit}
/>

The full HTML should be this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

Implementing onboarding/tutorial steps

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.

Run the app

Run the app and this should be your result:

alt-text-here

Here is the full source code for App.js :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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;

Congratulations, you have implemented intro.js in your react app!

Best book to learn React.js

Also, check out the video tutorial on implementing intro.js in your react app:

This post is licensed under CC BY 4.0 by the author.
Contents