ThadeuCesario / react-wizard-tour

Simple wizard component for React

react-onboarding

Simple wizard component for React.js

• TypeScript ready

NPM | Github | Feature request

Preview

Installation

• npm install --save react-onboarding
• yarn add react-onboarding

How To Use

First import this component where you want to use it

import Wizard from "react-onboarding"

Then just renders it

<Wizard />

Props

Prop	Description	Default value
rule	array rules for wizard	none
isShow	Sets view mode	true
prevButtonTitle	title for previous button	Prev
nextButtonTitle	title for next button	Next

Example

import React, { Component } from "react";
import Wizard from "react-onboarding";

const rule = [
    {
        elementId: 'elementIdOne',
        title: 'Title 1',
        description: 'description 1',
    },
    {
        elementId: 'elementIdTwo',
        title: 'Title 2',
        description: 'description 2',
    },
]

class App extends Component {
  render() {
    return (
        <Wizard rule={rule} nextButtonTitle="Next click" prevButtonTitle="Prev click"  />
    );
  }
}

export default App;