Tour
Hooks & 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)