Overview

React Joyride

Overview

Search…

Overview

Overview

​​
​​
Create awesome tours for your app!
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 too.
Open the demo
Open GitHub repo​
Setup
npm i react-joyride
Getting Started
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>
    );
  }
}
If you need to support legacy browsers you need to include the scrollingelement polyfill.

Props

Last modified 9mo ago

Copy link

Outline

Create awesome tours for your app!

Setup

Getting Started