A self-configuring tutorial library for React.
Blog
|
Docs
|
Demo
|
npm
- Clean and unobtrusive overlay to highlight the important parts of your app inspired by Chardin.js
- Lightweight, only depends on React and the
Spotlightcomponent can be lazy-loaded - Uses composable React hooks to build tutorials rather than selectors
- Mobile and desktop support
- Fully typed with TypeScript!
react-spotlight-tour comes with everything you need built into the npm
package, no need for integration with bundlers. Install the package with:
$ npm install react-spotlight-tour
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> ); }
To test changes locally run:
$ npx tsc --module es2015 --outDir website/src/react-spotlight-tour
You can then see your changes live on the documentation website by running:
$ cd website
$ npm start