React Joyride

React Joyride

Description

what is it ? : React library to build onboarging tours, Website tutorials.
URL : official website (opens in a new tab)
version : 2.5.0
Why ? :

  • Customizable
  • Gives access to implementation properties

Application

import Joyride from 'react-joyride';
 
export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };
 
  render () {
    const { steps } = this.state;
 
    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}