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;