react-joyride

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>
    );
  }
}

Documentation

• Props
• Step
• Styling
• Callback
• Constants