How can I make intro js work with React?

Question

I am trying to use introJs with React but it seems not to work. How can I make it work? Can you give me an example?

Answer 1

You can just treat it like any other npm module you'd add to your React app.

1. Install using npm:

   npm install intro.js --save

2. Import the module and css into the component where you want to use them:

   import introJs from 'intro.js'; import 'intro.js/introjs.css';

3. When the component mounts call the necessary function:

   componentDidMount() { introJs().start(); }

4. Add steps to the jsx as you normally would with html:

   data-intro='Hello step one!'

One odd thing that was happening to me was that some the css in the intro.js / intro.min.js wasn't operating as I expected. I had to jump into those files an tweak the opacity on the .introjs-helperLayer selector and the z-index on .introjs-fixParent but that could have been an edge case just for me.

Answer 2

Add the following to your index.html

<link href="https://cdn.jsdelivr.net/intro.js/2.3.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/intro.js/2.3.0/intro.min.js"></script>

Now, call introJs().start() inside componentDidMount

class App extends React.Component{
  componentDidMount(){
    introJs().start()
  }
  render(){
    return <div>
      <a href='http://google.com/' data-intro='Hello step one!'>one</a>
      <a href='http://google.com/' data-intro='Hello step two!'>two</a>
      <a href='http://google.com/' data-intro='Hello step three!'>three</a>
      <a href='http://google.com/' data-intro='Hello step four!'>four</a>
      </div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

a{
  margin-left: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href="https://cdn.jsdelivr.net/intro.js/2.3.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/intro.js/2.3.0/intro.min.js"></script>
<div id="app"></div>

Hope this helps!