Skip to content

ilyapasyuk/react-wizard-tour

Repository files navigation

react-onboarding

Simple wizard component for React.js

  • TypeScript ready

size

NPM | Github | Feature request

Preview

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;