React Joyride

Create awesome tours for your app!

Use it to showcase your app to new users or explain functionality of new features.

It uses react-floater for positioning and styling.
And you can use your own components if you want.

View the demo here

Setup

npm i react-joyride@next

Getting Started

import Joyride from 'react-joyride';

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

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

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

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

Documentation

Props

Step

Styling

Customization

Callback

Constants

Accessibility

Migration from 1.x