KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #codex #claude-code #mcp #rust #deepseek-harness #typescript #ai-agent #cli

react-spotlight-tour

★ 19 Open GitHub ↗

📝 Self-configuring product tour library for React

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">
  <img height="300" src="https://github.com/RevereCRE/react-spotlight-tour/blob/main/.github/readme_logo.png">
  <br>
  React Spotlight Tour
</h1>

<p align="center">
  A self-configuring tutorial library for React.
  <br>
  <a href="https://eng.reverecre.com/blog/product-tours-with-react">
    Blog
  </a>&nbsp;|&nbsp;<a href="https://reverecre.github.io/react-spotlight-tour">
    Docs
  </a>&nbsp;|&nbsp;<a href="https://reverecre.github.io/react-spotlight-tour/demo">
    Demo
  </a>&nbsp;|&nbsp;<a href="https://www.npmjs.com/package/react-spotlight-tour">
    npm
  </a>
</p>

## Features

- Clean and unobtrusive overlay to highlight the important parts of your app
  inspired by [Chardin.js](https://heelhook.github.io/chardin.js/)
- Lightweight, only depends on React and the `Spotlight` component can be
  lazy-loaded
- Uses composable React hooks to build tutorials rather than selectors
- Mobile and desktop support
- Fully typed with TypeScript!

## Getting Started

`react-spotlight-tour` comes with everything you need built into the npm
package, no need for integration with bundlers. Install the package with:

```sh
$ npm install react-spotlight-tour
```

## Example Usage

```tsx
import { useState } from 'react';
import { SpotlightTour, useSpotlight } from 'react-spotlight-tour';
import Spotlight from 'react-spotlight-tour/spotlight';

function StatusUpdateInput() {
  const spotlightRef = useSpotlight('Update your status');

// ...

return (
    <div ref={spotlightRef}>
      <textarea />
      <button>Update status</button>
    </div>
  );
}

function HomePage() {
  const [isOpen, setOpen] = useState(false);

return (
    <SpotlightTour
      open={isOpen}
      onClose={() => setOpen(false)}
      Spotlight={Spotlight}
    >
      <StatusUpdateInput />
    </SpotlightTour>
  );
}
```

## Contributing

To test changes locally run:

```sh
$ npx tsc --module es2015 --outDir website/src/react-spotlight-tour
```

You can then see your changes live on the documentation website by running:

```sh
$ cd website
$ npm start
```

react-spotlight-tour

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README