Basic

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!" }
    },
    {
      attachTo: { element: '#bar' },
      content: {
        title: "Do it!",
        description: "This is a description field and I really don't know what to write here..."
      }
    }
  ]
  const wrapperRef = useRef(null)
  const { start, goToStep, finish } = useROnboarding(wrapperRef)
  return (
    <div>
      <ROnboardingWrapper ref={wrapperRef} steps={steps} />
      <span id="foo">Howdy, My Friend!</span>
      <button id="bar">Click me for no reason</button>
      <button onClick={() => goToStep(1)}>Click to go second step</button>
      <div>
        <button onClick={start}>Start Onboarding</button>
        <button onClick={finish}>Finish Onboarding</button>
      </div>
    </div>
  )
}