Package Exports

@tesglobal/react-joyride

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 (@tesglobal/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

Create a tour for your app!
Use it to showcase your app for new users! Or explain functionality of complex features!

View the demo here

You can edit the demo here

If you are looking for the documentation for the old 1.x version, go here

Setup

npm i react-joyride@next

Getting Started

Just set a steps array to the Joyride component and you're good to go!

You can use your own component for the tooltip body or beacon, if you want.

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 = (data) => {
    const { action, index, type } = data;
  };

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

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

Documentation

This library uses react-floater and popper.js for positioning and styling.