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 render it

<Wizard />

Props

Property	Description	type	Default value
rule	array rules for wizard	WizardStep[]
isShow	Sets view mode	boolean?	true
prevButtonTitle	title for previous button	string?	Prev
nextButtonTitle	title for next button	string?	Next
closeButtonTitle	Text on Close button	string?	Close
closeButtonElement		ReactNode?	<button>
pinColor		string?	1787fc
lineColor		string?	1787fc
isScrollToElement		boolean?	false

Example

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

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

const App = () => {
    return (
        <Wizard rule={rule} />
    );
}

export default App;