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
- Archived: true
- Created: 2019-02-04T04:19:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-17T22:29:14.000Z (4 months ago)
- Last Synced: 2024-07-23T16:43:09.393Z (about 2 months ago)
- Language: CSS
- Homepage: https://react-shepherd.vercel.app
- Size: 5.13 MB
- Stars: 640
- Watchers: 6
- Forks: 36
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
**This repository is no longer being maintained and all further development is at the main [shepherd](https://github.com/shepherd-pro/shepherd/tree/main/packages/react) repo.**
# 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/)**.
[![NPM](https://img.shields.io/npm/v/react-shepherd.svg)](https://www.npmjs.com/package/react-shepherd)
[![Test Status](https://github.com/shipshapecode/react-shepherd/workflows/Test/badge.svg)](https://github.com/shipshapecode/react-shepherd/actions?query=workflow%3ATest)
[![Maintainability](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/maintainability)](https://codeclimate.com/github/shipshapecode/react-shepherd/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/test_coverage)](https://codeclimate.com/github/shipshapecode/react-shepherd/test_coverage)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](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