Skip to content

README.md

Latest commit

 

History

History
76 lines (56 loc) · 2.02 KB

README.md

File metadata and controls

76 lines (56 loc) · 2.02 KB

react

NPM

This is a React wrapper for the Shepherd tour library. It's mainly a wrapper around the Shepherd library that exposes the tour object and methods to the context object that can be passed into props for dynamic interactivity.

Install

Use this simple NPM command or whatever package manager is your favorite.

npm install --save react-shepherd

Usage

Via Provider/Context

import { Component, useContext } from 'react';
import { ShepherdJourneyProvider, useShepherd } from 'react-shepherd';
import newSteps from './steps';

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

function Button() {
  const Shepherd = useShepherd();
  const tour = new Shepherd.Tour({
    ...tourOptions,
    steps: newSteps
  });

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

export default function App() {
  return (
    <div>
      <ShepherdJourneyProvider>
        <Button />
      </ShepherdJourneyProvider>
    </div>
  );
}

Configuration

The following configuration options for a tour can be set on the useShepherd hook to control the way that Shepherd is used. This is simply a POJO passed to Shepherd to use the options noted in the Shepherd Tour options.

License

The react-shepherd wrapper library is licensed under MIT.

However, shepherd.js (the underlying library) is licensed under AGPL-3.0 and requires a commercial license for commercial use.

Shepherd.js Licensing

  • Free for open source and non-commercial projects under AGPL-3.0
  • Commercial license required for commercial products and revenue-generating companies

📄 Read Shepherd.js License Details
💳 Purchase Commercial License