react-wizard-onboarding v1.0.2

React Wizard Onboarding

Pretty fancy onboarding wizard for your website, made in React.

Live demo at https://chrisuser.github.io/react-wizard-onboarding.

Installation

Install via npm

npm install --save react-wizard-onboarding

or yarn

yarn add react-wizard-onboarding

Usage

1. Wrap your app inside the <TutorialProvider> context.

Example

const config = createTutorialConfig({ sticky: true, darkMode: true, displayDots: true, hideArrowOnSticky: true })

const Setup: React.FC = () => {
    return (
        <TutorialProvider config={config}>
            <App />
        </TutorialProvider>
    )
}

ReactDOM.createRoot(document.getElementById('root')!).render(<Setup />)

2. Register all the elements of a page to include them into the onboarding carousel.

Example

const { registerTutorialComponent, startTutorial } = useTutorial()
...

return (
    <div className="main-container">
        <header
            ref={registerTutorialComponent({
                position: 1,
                id: 'header',
                tutorialKey: 'main_tutorial',
                text: 'This is the header element...'
            })}
        >
    ...
)

3. Call the startTutorial method from useTutorial hook anywhere in the page (eg. with an onClick or a useEffect).

Example

    <button onClick={() => startTutorial()}>
        Start
    </button>

Hooks

• registerTutorialComponent: (componentData: TutorialComponentData) Registers a tutorial component to be highlighted during the onboarding steps.
• startTutorial: (tutorialKey?: string) Starts the tutorial onboarding process. You can also specify which tutorial to start. If not specified, all the previously registered components will be highlighted during the onboarding process.

Props

TutorialComponentData connect a component to the onboarding process

TutorialConfiguration configure the onboarding wizard UI

License

react-wizard-onboarding is MIT licensed.