Hooks & HOC

Tour hooks & HOC

Hooks to interact with Tour


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


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>
        Now you are visiting the place {currentStep + 1} of {steps.length}
        <button onClick={() => setIsOpen(o => !o)}>Toggle Tour</button>
        <button onClick={() => setCurrentStep(3)}>
          Take a fast way to 4th place
          onClick={() =>
              { selector: '.new-place-1', content: 'New place 1' },
              { selector: '.new-place-2', content: 'New place 2' },
          Switch to a new set of places, starting from the last one!


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


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)