craigmichaelmartin / react-joyride

Create guided tours in your apps

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