[](https://www.npmjs.com/package/@shepherdpro/react)
npm install react-shepherd
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.
Use this simple NPM command or whatever package manager is your favorite.
``bash`
npm install --save react-shepherd
`tsx
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 (
);
}
export default function App() {
return (
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
react-shepherd` is licensed under AGPL-3.0 (for open source and non-commercial use) with a Commercial License available for commercial use.- Free for open source and non-commercial projects under AGPL-3.0
- Commercial license required for commercial products and revenue-generating companies