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 11mo ago

Copy link

On this page

Create awesome tours for your app!

Setup

Getting Started