intro.js-react

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

Quicklinks

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

Example

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

Installation

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';

Usage

Two component are available for both steps and hints:

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

Steps

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

Basic example:

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

Props

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | enabled | Defines if the steps are visible or not. Default: false. | Boolean | | | initialStep | Step index to start with when showing the steps. | Number | ✅ | | steps | All the steps. | Step[] | ✅ | | onExit | Callback called when the steps are disabled Required to force keeping track of the state when the steps are dismissed with an Intro.js event and not the enabled prop. | Function (stepIndex) | ✅ | | onBeforeExit | Callback called before exiting the intro. If you want to prevent exiting the intro, you can return false in this callback (available since intro.js 0.2.7). | Function (stepIndex) | | | onStart | Callback called when the steps are enabled. | Function (stepIndex) | | | onChange | Callback called when the current step is changed. | Function (nextStepIndex, nextElement) | | | onBeforeChange | Callback called before changing the current step. If you want to prevent the transition to the next / previous step, you can return false in this callback (available since intro.js 2.8.0). | Function (nextStepIndex, nextElement) | | | onAfterChange | Callback called after changing the current step. | Function (newStepIndex, newElement) | | | onPreventChange | Callback called if you prevented transitioning to a new step by returning false in onBeforeChange. | Function (stepIndex) | | | onComplete | Callback called when all the steps are completed. | Function () | | | options | Intro.js options. | Object | | |

Step

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

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | element | CSS selector to use for the step. | String | | | intro | The tooltip content. | String | React element | ✅ | | position | Position of the tooltip. | String | | | tooltipClass | CSS class of the tooltip. | String | | | highlightClass | CSS class of the helperLayer. | String | | |

Dynamic elements

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

Basic example:

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

Props

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | enabled | Defines if the hints are visible or not. Default: false. | Boolean | | | hints | All the hints. | Hint[] | ✅ | | onClick | Callback called when a hint is clicked. | Function ( ) | | | onClose | Callback called when a hint is closed. | Function ( ) | | | options | Intro.js options. | Object | | |

Hint

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

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | element | CSS selector to use for the hint. | String | ✅ | | hint | The tooltip text. | String | ✅ | | hintPosition | Position of the tooltip. | String | | |

Intro.js API

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)}
/>

Intro.js options

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.

| Name | Description | Type | | --- | --- | :---: | | nextLabel | Next button label. | String | | prevLabel | Previous button label. | String | | skipLabel | Skip button label. | String | | doneLabel | Done button label. | String | | hidePrev | Hides the Previous button in the first step. | Boolean | | hideNext | Hide the Next button in the last step. | Boolean | | tooltipPosition | Position of the tooltips. | String | | tooltipClass | CSS class of the tooltips. | String | | highlightClass | CSS class of the helperLayer. | String | | exitOnEsc | Exit by pressing Escape. | Boolean | | exitOnOverlayClick | Exit by clicking on the overlay layer. | Boolean | | showStepNumbers | Show steps number in a red circle. | Boolean | | keyboardNavigation | Allows navigation between steps using the keyboard. | Boolean | | showButtons | Show navigation buttons. | Boolean | | showBullets | Show bullets. | Boolean | | showProgress | Show progress indicator. | Boolean | | scrollToElement | Enables scrolling to hidden elements. | Boolean | | overlayOpacity | Opacity of the overlay. | Number | | scrollPadding | Padding when automatically scrolling to an element. | Number | | positionPrecedence | Precedence of positions. | String[] | | disableInteraction | Disables interaction inside elements. | Boolean | | hintPosition | Position of the hints. | String | | hintButtonLabel | Hint button label. | String | | hintAnimation | Enables hint animations. | Boolean |

License

Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.