Integrate Intro.js with React Hooks

Question

How can I integrate intro.js with react hooks?

The only documented examples (even on stack overflow) are for the componentDidMount etc methods.

Answer 1

There's very little context on your question but you most certainly could.

FYI. I'm not familiar with introJS or it's API so I'll make up some stuff :)

For example, if you wanted the equivalent of starting on componentDidMount, you'd do:

useEffect(
  () => {
    // Get intro JS started
    introJs.init();
  },
  [] // Notice the empty array. This will only run when component mounts.
)

However, if you have something more dynamic, you need to tell intro.js about DOM updates performed by React. Simplest example would be to recreate introJS on every update.

useEffect(
  () => {
    // Get intro JS started
    introJs.init();
    // Destroy intro JS when component changes happen
    return () => introJs.destroy()
  }
  // Notice no dependencies array. This will run on every update.
)

This will essentially re-create introJS every component update - which may or may not be quite what you want/need.

You may use useEffect with specific dependencies that might require introJS to get updated, you may use refs to get the latest elements and send them to your introJS, you may use useState to keep track of the step number of introJS so you can start it back where your user left off, etc.

Answer 2

You need to install both "intro.js" and "introjs-react" into your package.json. Then you can continue with guideline in website for intro.js-react.