Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shepherd-pro/react-shepherd
A React wrapper for the site tour library Shepherd
https://github.com/shepherd-pro/react-shepherd
Last synced: about 2 months ago
JSON representation
A React wrapper for the site tour library Shepherd
- Host: GitHub
- URL: https://github.com/shepherd-pro/react-shepherd
- Owner: shepherd-pro
- Created: 2019-02-04T04:19:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-06T10:14:30.000Z (about 2 months ago)
- Last Synced: 2024-05-06T11:31:10.483Z (about 2 months ago)
- Language: CSS
- Homepage: https://react-shepherd.vercel.app
- Size: 5.37 MB
- Stars: 626
- Watchers: 6
- Forks: 36
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-list - react-shepherd
- fuck-awesome-stars - shepherd-pro/react-shepherd - A React wrapper for the site tour library Shepherd (CSS)
README
# react-shepherd
**[react-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**.
[](https://www.npmjs.com/package/react-shepherd)
[](https://github.com/shipshapecode/react-shepherd/actions?query=workflow%3ATest)
[](https://codeclimate.com/github/shipshapecode/react-shepherd/maintainability)
[](https://codeclimate.com/github/shipshapecode/react-shepherd/test_coverage)
[](https://standardjs.com)
This is a React wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site 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
```bash
npm install --save react-shepherd
```
## Usage
### Via Provider/Context
```jsx
import React, { Component, useContext } from "react";
import { ShepherdTour, ShepherdTourContext } from "react-shepherd";
import newSteps from "./steps";
const tourOptions = {
defaultStepOptions: {
cancelIcon: {
enabled: true,
},
},
useModalOverlay: true,
};
function Button() {
const tour = useContext(ShepherdTourContext);
return (
Start Tour
);
}
export default function App() {
return (
);
}
```
### Via Hook
```jsx
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 (
Start Tour
);
}
```
## Configuration
The following configuration options for a tour can be set on the ShepherdTour 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](https://shepherdjs.dev/docs/Tour.html).
**The only required option is `steps`, which is an array passed to the props.**
### tourOptions
`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.
### steps
`PropTypes.array`
You must pass an array of steps to `steps`, something like this:
```js
const steps = [
{
id: 'intro',
attachTo: { element: '.first-element', on: '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,
cancelIcon: {
enabled: 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');
}
}
},
// ...
];
```
## Steps
The options are the same as Shepherd [options](https://shepherdjs.dev/docs/Step.html).
## License
MIT