Skip to Content
TourHooks & HOC

Tour hooks & HOC

Hooks to interact with Tour

useTour

Later in any Component down in the tree of TourProvider you can control the Tour in many ways

Example

import { useTour } from '@reactour/tour' function MyComponent() { const { isOpen, currentStep, steps, setIsOpen, setCurrentStep, setSteps } = useTour() return ( <> <h1>{isOpen ? 'Welcome to the tour!' : 'Thank you for participate!'}</h1> <p> Now you are visiting the place {currentStep + 1} of {steps.length} </p> <nav> <button onClick={() => setIsOpen(o => !o)}>Toggle Tour</button> <button onClick={() => setCurrentStep(3)}> Take a fast way to 4th place </button> <button onClick={() => setSteps([ { selector: '.new-place-1', content: 'New place 1' }, { selector: '.new-place-2', content: 'New place 2' }, ]) setCurrentStep(1) } > Switch to a new set of places, starting from the last one! </button> </nav> </> ) }

Values

OptionTypeDescription
isOpenbooleanIs the Tour open or close
currentStepnumberThe current step (zero based)
stepsStepType[]The `array` of steps currently set
setIsOpenDispatch<React.SetStateAction<boolean>>`useState` function to open or close Tour
setStepsDispatch<React.SetStateAction<StepType[]>>`useState` function to update the `array` of steps
metastringGlobal meta information that could be useful in complex Tour/s situtationss
setMetaDispatch<React.SetStateAction<string>>`useState` function to update the global meta info

withTour

An enhancer that allows to have all useTour functionalities through a Higher Order Component.

import { Component } from 'react' import { withTour } from '@reactour/tour' class MyComponent extends Component { render() { return ( <> <button onClick={() => this.props.setIsOpen(true)}>Start Tour</button> <div>{/* ... */}</div> </> ) } } export default withTour(MyCompnent)
Last updated on