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.

License

MIT © BatuhanAydonerDev