Skip to Content
TourInstallation & Usage

Install and use the Tour

Tourist Guide into your React Components

Install @reactour/tour

npm i @reactour/tour

Usage

1. Add the TourProvider

This should be at the root of your Application, passing the steps of the elements to highlight during the Tour.

import { TourProvider } from '@reactour/tour' ReactDOM.render( <TourProvider steps={steps}> <App /> </TourProvider>, document.getElementById('root') ) const steps = [ { selector: '.first-step', content: 'This is my first Step', }, // ... ]

2. Control the Tour

Then somewhere down the Application tree, control the Tour using useTour hook.

import { useTour } from '@reactour/tour' function App() { const { setIsOpen } = useTour() return ( <> <p className="first-step"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta metus nec, porta luctus orci </p> <button onClick={() => setIsOpen(true)}>Open Tour</button> </> ) }
Last updated on