react-tour

A react library to build guided tours that encourage users to take action.

Example

import React from 'react';
import { useGuidedTour, GuidedTourProvider, TourTarget } from 'react-guided-tour';

const TOUR_STEPS = ["first-step", "second-step"];

function Root() {
  const { finishCurrentStep, startTour } = useGuidedTour();

  React.useEffect(() => {
    startTour(TOUR_STEPS);
  }, []);

  return (
    <App>
      <TourTarget
        name={TOUR_STEPS[0]}
        content={<div>Some step explanation here</div>}
      >
        <div>
          <div>This is the first step</div>
          <button onClick={() => finishCurrentStep('first-step')}>Next</button>
        </div>
      </TourTarget>

      <TourTarget
        name={TOUR_STEPS[1]}
        content={<div>Some other explanation here</div>}
      >
        <div>
          <div>This is the other step</div>
          <button onClick={() => finishCurrentStep('second-step')}>Finish Tour</button>
        </div>
      </TourTarget>
    </App>
  );
}

export default () => (
  <GuidedTourProvider>
    <Root />
  </GuidedTourProvider>
);

Why?