@spuppateddu/guide-react

Onboarding walkthroughs, new-feature announcements and on-demand tutorials for React.

Spotlight modals rendered in the browser's top layer — no z-index anywhere — dimming and/or blurring everything except a rectangular hole around a target element. A hole you can still click through, so the guide can say "press this" and mean it.

npm install @spuppateddu/guide-react @spuppateddu/guide-storage-local

import { GuideProvider, useGuideTarget } from '@spuppateddu/guide-react'
import { createLocalStorage } from '@spuppateddu/guide-storage-local'
import '@spuppateddu/guide-react/styles.css'

;<GuideProvider guides={GUIDES} storage={createLocalStorage()} path={pathname}>
  <button ref={useGuideTarget('notes-new')}>New note</button>
</GuideProvider>

Mounting the provider is all you do — it renders the overlay, card, pointer and live region by itself, and decides on its own whether a guide should run for this user right now.

Full documentation: https://github.com/Spuppateddu/guide

License

MIT