Lightweight Guided Tour Component For React - r-onboarding

Description:

R-onboarding is a lightweight yet customizable onboarding & guided tour component for React.

It’s an introduction view with a walkthrough that guides your users to set up a new account, sign up, install your app, introduce new features, or start playing a game.

How to use it:

1. Installation.

# Yarn
$ yarn add r-onboarding
# NPM
$ npm i r-onboarding

2. Import the r-onboarding component.

import { ROnboardingWrapper, useROnboarding } from 'r-onboarding'
import 'r-onboarding/dist/style.css'
import { useRef } from 'react'

3. Add the component to your app and define your own steps as follows:

export default function () {
  const steps = [
    { attachTo: { element: '#element-1' }, content: { title: "Welcome!" } },
    { attachTo: { element: '#element-2' }, content: { title: "Introduce" } },
    { attachTo: { element: '#element-3' }, content: { title: "Goodbye!" } },
  ]
  const wrapperRef = useRef(null)
  const { start, goToStep, finish } = useROnboarding(wrapperRef)
  return (
    <div>
      <ROnboardingWrapper ref={wrapperRef} steps={steps} />
      {/* ... */}
    </div>
  )
}

4. Possible options.

{
  popper: {},
  disableOverlay: false,
  scrollToStep: {
    enabled: true,
    options: {
      behavior: 'smooth',
      block: 'center',
      inline: 'center'
    }
  }
}

5. Render props.