Package Exports

react-joyride
react-joyride/lib/constants

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-joyride) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Joyride

React-Joyride is React component to create a tour for your app for new users or explain functionality of new features.
It uses react-floater (with popper.js for positioning and styling) and you can use your own components if you want.

View the demo here

You can edit the demo here

Setup

npm install --save react-joyride

Getting Started

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    run: false,
    steps: [
      {
        target: '.my-first-step',
        content: 'This if my awesome feature!',
        placement: 'bottom',
      },
      {
        target: '.my-other-step',
        content: 'This if my awesome feature!',
        placement: 'bottom',
      },
      ...
    ]
  };

  componentDidMount() {
    this.setState({ run: true });
  }

  callback = (tour) => {
    const { action, index, type } = data;
  };

  render () {
    const { steps, run } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          run={run}
          debug={true}
          callback={this.callback}
          ...
        />
        ...
      </div>
    );
  }
}

react-joyride