ijr
intro.js-react16
npm i intro.js-react16
ijr

intro.js-react16

Intro.js react wrapper

by HiDeoo

1.0.0 (see all)License:MITTypeScript:Not Found
npm i intro.js-react16
Readme

intro.js-react

Build Status Coverage Status

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

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

NameDescriptionTypeRequired
enabledDefines if the steps are visible or not.
Default: false.
Boolean
initialStepStep index to start with when showing the steps.Number
stepsAll the steps.Step[]
onExitCallback 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)
onStartCallback called when the steps are enabled.Function
(stepIndex)
onChangeCallback called when the current step is changed.Function
(nextStepIndex, nextElement)
onBeforeChangeCallback 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)
onAfterChangeCallback called after changing the current step.Function
(newStepIndex, newElement)
onPreventChangeCallback called if you prevented transitioning to a new step by returning false in onBeforeChange.Function
(stepIndex)
onCompleteCallback called when all the steps are completed.Function
()
optionsIntro.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',
  },
];
NameDescriptionTypeRequired
elementCSS selector to use for the step.String
introThe tooltip text.String
positionPosition of the tooltip.String
tooltipClassCSS class of the tooltip.String
highlightClassCSS 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

NameDescriptionTypeRequired
enabledDefines if the hints are visible or not.
Default: false.
Boolean
hintsAll the hints.Hint[]
onClickCallback called when a hint is clicked.Function
( )
onCloseCallback called when a hint is closed.Function
( )
optionsIntro.js options.Object

Hint

const hints = [
  {
    element: '.selector1',
    hint: 'test 1',
    hintPosition: 'middle-middle',
  },
  {
    element: '.selector2',
    hint: 'test 2',
  },
];
NameDescriptionTypeRequired
elementCSS selector to use for the hint.String
hintThe tooltip text.String
hintPositionPosition 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}
  steps={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.

NameDescriptionType
nextLabelNext button label.String
prevLabelPrevious button label.String
skipLabelSkip button label.String
doneLabelDone button label.String
hidePrevHides the Previous button in the first step.Boolean
hideNextlHide the Next button in the last step.Boolean
tooltipPositionPosition of the tooltips.String
tooltipClassCSS class of the tooltips.String
highlightClassCSS class of the helperLayer.String
exitOnEscExit by pressing Escape.Boolean
exitOnOverlayClickExit by clicking on the overlay layer.Boolean
showStepNumbersShow steps number in a red circle.Boolean
keyboardNavigationAllows navigation between steps using the keyboard.Boolean
showButtonsShow navigation buttons.Boolean
showBulletsShow bullets.Boolean
showProgressShow progress indicator.Boolean
scrollToElementEnables scrolling to hidden elements.Boolean
overlayOpacityOpacity of the overlay.Number
scrollPaddingPadding when automatically scrolling to an element.Number
positionPrecedencePrecedence of positions.String[]
disableInteractionDisables interaction inside elements.Boolean
hintPositionPosition of the hints.String
hintButtonLabelHint button label.String
hintAnimationEnables hint animations.Boolean

License

Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.

Downloads/wk

1

GitHub Stars

315

LAST COMMIT

8mos ago

MAINTAINERS

1

CONTRIBUTORS

9

OPEN ISSUES

1

OPEN PRs

1
VersionTagPublished
1.0.0
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate