A small React wrapper around Intro.js. The wrapper provides support for both steps and hints.

• Example
• Installation
• Usage
  • Steps
  • Hints
• Intro.js API
• Intro.js options

You can find a small example here on codesandbox.io.

Install using Npm (don't forget to add the --save option if you're still using npm < 5):

$ npm install intro.js-react

Or Yarn:

$ yarn add intro.js-react

Make sure to have React & Intro.js installed (they're peer dependencies) and the Intro.js CSS definitions properly loaded into your project.

This would usually looks like:

import 'intro.js/introjs.css';

Two component are available for both steps and hints:

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

Note: Steps indexes always starts from 0 in this wrapper instead of 1 like in Intro.js.

<Steps
  enabled={stepsEnabled}
  steps={steps}
  initialStep={initialStep}
  onExit={this.onExit}
/>

const steps = [
  {
    element: '.selector1',
    intro: 'test 1',
    position: 'right',
    tooltipClass: 'myTooltipClass',
    highlightClass: 'myHighlightClass',
  },
  {
    element: '.selector2',
    intro: 'test 2',
  },
  {
    element: '.selector3',
    intro: 'test 3',
  },
];

If you want to use Intro.js Steps with dynamically created elements, you have to update the element associated to the step when it's available.

To do that, you can use the updateStepElement() API and pass to it the index of the step to update:

<Steps
  enabled={stepsEnabled}
  steps={steps}
  ref={steps => (this.steps = steps)}
/>

onBeforeChange = nextStepIndex => {
  if (nextStepIndex === 4) {
    this.steps.updateStepElement(nextStepIndex);
  }
}

<Hints
  enabled={hintsEnabled}
  hints={hints}
/>

const hints = [
  {
    element: '.selector1',
    hint: 'test 1',
    hintPosition: 'middle-middle',
  },
  {
    element: '.selector2',
    hint: 'test 2',
  },
];

If for some reasons you need to use the Intro.js API, you can still get the Intro.js instance by using a ref on either the <Steps /> or <Hints /> components and using this.refName.introJs.

<Hints
  enabled={hintsEnabled}
  hints={hints}
  ref={hints => (this.hints = hints)}
/>

You can find more details regarding Intro.js options and their default values in the documentation or directly in their code.

The wrapper overrides some Intro.js default options in the helpers/defaultProps.js file.

Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.