Tour
Installation & Usage

Install and use the Mask

Tourist Guide into your React Components

Install @react-explore-kit/tour (opens in a new tab)

npm i @react-explore-kit/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 "@react-explore-kit/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 "@react-explore-kit/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>
    </>
  );
}
Popover propsTour Props