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

| Name | Optional | Type | Description | | ----------- | -------- | -------- | ---------------------------------------------------- | | id | | string | Component key or identifier | | position | | number | Component chapter position in the onboarding wizard | | tutorialKey | | string | Identifier of the onboarding tutorial chapters group | | text | ✔️ | string | Onboarding chapter text | | iamge | ✔️ | string | Onboarding chapter image |

TutorialConfiguration configure the onboarding wizard UI

| Name | Optional | Type | Description | | ----------- | -------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------- | | title | ✔️ | string | Onboarding process title | | sticky | ✔️ | boolean | Determines if the wizard should stick to the registered components at each step. | | darkMode | ✔️ | boolean | Enables dark theme mode. | | displayDots | ✔️ | boolean | Determines if page dots should be displayed in default mode (non-sticky only). | | labels | ✔️ | { next?: string; complete?: string; close?: string } | Custom labels for the wizard buttons. | | icons | ✔️ | { next?: ReactNode; complete?: ReactNode; close?: ReactNode } | Custom icons for the wizard buttons. |

License

react-wizard-onboarding is MIT licensed.