# react-voyager

Interactive product tours, onboarding walkthroughs and coachmarks for React.

-   Zero runtime dependencies, React 17 / 18 / 19
-   ESM and CJS builds, works in Next.js App Router, Vite, CRA and Jest
-   Waits for targets that appear later, follows targets that move or resize
-   Highlight geometry is tracked outside React, so scrolling does not re-render your application

```bash
npm install react-voyager
```

```tsx
import { VoyagerProvider, useVoyagerHelpers } from 'react-voyager'

const steps = [
    { selector: '#profile', content: 'This is your profile' },
    { selector: '#settings', content: 'And these are the settings' },
]

const PopperContent = ({ content, goNextStep, skip }) => (
    <div style={{ padding: 16 }}>
        {content}
        <button onClick={skip}>skip</button>
        <button onClick={() => void goNextStep()}>next</button>
    </div>
)

export const App = ({ children }) => (
    <VoyagerProvider steps={steps} PopperContent={PopperContent}>
        {children}
    </VoyagerProvider>
)
```

Full documentation, the API reference and the demo live in the
[repository README](https://github.com/sfkhakimov/react-voyager#readme) and at
[react-voyager.vercel.app](https://react-voyager.vercel.app/).

## License

MIT