# tourkit

Write it once. Ship it twice.

tourkit is an MIT-licensed product tour and onboarding walkthrough library for React and React
Native. A tour is a `TourConfig` array with no renderer imports: `@tourkit/react` draws it in
the DOM, `@tourkit/native` draws it with Reanimated and SVG. Current version 0.2.0.

## When to use tourkit

- You need a product tour, onboarding walkthrough, coach marks or a spotlight overlay in a React
  or React Native app.
- You need the same tour to run on web and on mobile from one definition, which is the case no
  other library in this space covers.
- You need steps that wait on your own data rather than a fixed timeout, steps that appear only
  for some users, or a tour that resumes where the user abandoned it.
- You want the overlay to match a design system, through theme tokens, component slots, an
  unstyled entry, or fully headless rendering.

## When not to use tourkit

- You are not on React. tourkit is React-only; driver.js or Shepherd.js are the vanilla options.
- You need the smallest possible bundle for a single highlight. driver.js is around 5KB.
- You want a hosted dashboard where non-engineers author tours. tourkit is a library, and tours
  live in your repository as code.

## Install

```bash
npm i @tourkit/react                                              # web
npm i @tourkit/native react-native-svg react-native-reanimated    # react native
```

## Documentation

- [Docs index](https://www.tourkit.tech/docs.md)
- [Getting started](https://www.tourkit.tech/docs/getting-started.md)
- [Adding tourkit to an existing app](https://www.tourkit.tech/docs/integration.md)
- [API reference](https://www.tourkit.tech/docs/api.md)
- [Comparison with driver.js, Shepherd.js, react-joyride, intro.js and Reactour](https://www.tourkit.tech/alternatives)

Every documentation page is available as markdown at its URL plus `.md`, or with
`Accept: text/markdown`.

## Source

- [GitHub](https://github.com/yz174/tourkit)
- [@tourkit/react on npm](https://www.npmjs.com/package/@tourkit/react)
- [@tourkit/native on npm](https://www.npmjs.com/package/@tourkit/native)