React Shepherd

Guide your users through a tour of your app.

Installation

yarn add react-shepherd

Usage via Provider/Context



import React, { Component } from 'react'
import { useShepherdTour } from 'react-shepherd'
import newSteps from './steps'

const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    }
  },
  useModalOverlay: true
};


function Button() {
  const tour = useContext(ShepherdTourContext);

  return (
    <button className="button dark" onClick={tour.start}>
      Start Tour
    </button>
  );
}

class App extends Component {
  render() {
    return (
      <div>
        <ShepherdTour steps={newSteps} tourOptions={tourOptions}>
          <Button />
        </ShepherdTour>
      </div>
    );
}

Usage via Hooks



import React, { Component } from 'react'
import { useShepherdTour } from 'react-shepherd'
import newSteps from './steps'

const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    }
  },
  useModalOverlay: true
};


export default function App() {
  const tour = useShepherdTour({ tourOptions, steps: newSteps });

  return (
    <button class="button dark" onClick={tour.start}>
      Start Tour
    </button>
  );
}

★ on Github View Docs