react-shepherd
This is a React wrapper for the Shepherd, site tour, library. It provides additional functionality, on top of Shepherd, as well.
Install
npm install --save react-shepherd
Usage
import React, { Component } from 'react'
import MyComponent from 'react-shepherd'
class Example extends Component {
render () {
return (
<MyComponent />
)
}
}
Configuration
The following configuration options for a tour can be set on the ShepherdTour to control the way that Shepherd is used.
The only required option is steps
, which is an array passed to the props.
confirmCancel
PropTypes.bool
When set to true
it will pop up a native browser confirm window on cancel, to ensure you want to cancel.
confirmCancelMessage
PropTypes.string
A string to display in the confirm dialog when confirmCancel
is set to true.
defaultStepOptions
PropTypes.object
Used to set the options that will be applied to each step by default. You can pass in any of the options that you can with Shepherd.
default value:
{}
tourName
PropTypes.string
A string name for the tour that will also be set as an ID to help with identifying unique tours.
steps
PropTypes.array
You must pass an array of steps to steps
, something like this:
const steps = [
{
id: 'intro',
options: {
attachTo: '.first-element bottom',
beforeShowPromise: function() {
return new Promise(function(resolve) {
setTimeout(function() {
window.scrollTo(0, 0);
resolve();
}, 500);
});
},
buttons: [
{
classes: 'shepherd-button-secondary',
text: 'Exit',
type: 'cancel'
},
{
classes: 'shepherd-button-primary',
text: 'Back',
type: 'back'
},
{
classes: 'shepherd-button-primary',
text: 'Next',
type: 'next'
}
],
classes: 'custom-class-name-1 custom-class-name-2',
highlightClass: 'highlight',
scrollTo: false,
showCancelLink: true,
title: 'Welcome to React-Shepherd!',
text: ['React-Shepherd is a JavaScript library for guiding users through your React app.'],
when: {
show: () => {
console.log('show step');
},
hide: () => {
console.log('hide step');
}
}
}
},
...
]);
useModalOverlay
PropTypes.boo
A value that should be set to true, if you would like the rest of the screen, other than the current element,
greyed out, and the current element highlighted. If you do not need modal functionality, you can remove this option or set it to false.
default value:
false
Steps
The options are the same as Shepherd options.
License
MIT