Skip to content
A React wrapper for the site tour library Shepherd
CSS JavaScript HTML TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot
example
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
README.md
greenkeeper.json
package.json
rollup.config.js
tsconfig.json
yarn.lock

README.md

react-shepherd

NPM Build Status Maintainability Test Coverage Greenkeeper badge JavaScript Style Guide

This is a React wrapper for the 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

npm install --save react-shepherd

Usage

import React, { Component } from 'react';
import { ShepherdTour, TourMethods } from 'react-shepherd';
import steps from './steps';

const tourOptions = {
  defaultStepOptions: { showCancelLink: true },
  useModalOverlay: true
};

class App extends Component {
  render() {
    return (
      <div>
        <ShepherdTour steps={steps} tourOptions={tourOptions}>
          <TourMethods>
            {(tourContext) => (
              <button className="button dark" onClick={tourContext.start}>
                Start Tour
              </button>
            )}
          </TourMethods>
        </ShepherdTour>
      </div>
    );
}

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. 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:

const steps = [
  {
    id: 'intro',
      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');
        }
      }
  },
  ...
]);

Steps

The options are the same as Shepherd options.

License

MIT

You can’t perform that action at this time.