react-shepherd v4.3.0
react
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 @shepherdpro/react
Usage
Via Provider/Context
import { Component, useContext } from 'react';
import { ShepherdJourneyProvider, useShepherd } from '@shepherdpro/react';
import newSteps from './steps';
const tourOptions = {
defaultStepOptions: {
cancelIcon: {
enabled: true
}
},
useModalOverlay: true
};
function Button() {
const shepherd = useShepherd(ShepherdTourContext);
const tour = 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. You can also pass an API Key to use Shepherd Pro features for analytics related events tracking.
apiKey
PropTypes.string
Used to connect your tours to a Pro instance to get additional user information and feedback.
Steps
The options are the same as Shepherd options.
License
MIT
21 days ago
26 days ago
26 days ago
27 days ago
27 days ago
27 days ago
4 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago