React-tutorial-stepper NPM

react-tutorial-stepper

A Tutorial Stepper component for React Applications

When you make updates for your React application, you can show your customers what' s news step by step.

Install

npm install --save react-tutorial-stepper

Usage

import React, { Component } from 'react'

import Tutorial from 'react-tutorial-stepper'

class ReactTutorialStepper extends Component {
  render() {
    return (
      <Tutorial
        openTutorial={true}
        elements={['id']} // elements={[<ids of elements>]}
        descriptions={['This is a description.']} // descriptions={[<descriptions of steps>]}
        prevButtonTitle="Prev"
        nextButtonTitle="Next"
        lastStepButtonTitle="Finish"
        onClick={() => { console.log("End of the tutorial"); }}
      />
    )
  }
}

Props

Prop	Type	Required	Default	Note
openTutorial	boolean	Yes	false	Open(true)/close(false) the tutorial.
elements	Array-String-	Yes		Element id list.
descriptions	Array-String-	Yes		Description list for each step. Descriptions depend on id order. They will be dispayed at each step.
prevButtonTitle	String	Yes		Title for previous button.
nextButtonTitle	String	Yes		Title for next button.
lastStepButtonTitle	String	Yes		Button title for last step.
onClose	Function	Yes		Function will be executed after closing tutorial.