Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-joyride-q5 with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactJoyrideQ5 = require("react-joyride-q5")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-joyride-q5 v2.0.0

Create walkthroughs and guided tours for your apps

React Joyride

Joyride example image

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

Props

Step

Styling

Callback

Constants

Migration from 1.x

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free