Usage

Learn how to use r-onboarding in your React application.

Create a steps array

const steps = [
  { attachTo: { element: '#foo' }, content: { title: "Welcome!" } }
]

See Step for available options

Create a ref to pass to the ROnboardingWrapper component and useROnboarding hook

const wrapperRef = useRef(null)
const { start, goToStep, finish } = useROnboarding(wrapperRef)

after importing ROnboardingWrapper, useROnboarding and style.css your component should look like this

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

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

You can now start the onboarding by calling start function or in useEffect hook

useEffect(() => start(), [])

Please check out the Advanced Usage if you want to customize the step UI

Installation

Advanced Usage