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 '@react-explore-kit/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

Option	Type	Description
isOpen	boolean	Is the Tour open or close
currentStep	number	The current step (zero based)
steps	StepType[]	The `array` of steps currently set
setIsOpen	Dispatch<React.SetStateAction<Boolean>>	`useState` function to open or close Tour
setSteps	Dispatch<React.SetStateAction<StepType[]>>	`useState` function to update the `array` of steps
meta	string	Global meta information that could be useful in complex Tour/s situtationss
setMeta	Dispatch<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 "@react-explore-kit/tour";
 
class MyComponent extends Component {
  render() {
    return (
      <>
        <button onClick={() => this.props.setIsOpen(true)}>Start Tour</button>
        <div>{/* ... */}</div>
      </>
    );
  }
}
 
export default withTour(MyCompnent);

Tour Props Examples