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
1
npm i react-joyride
Copied!
Getting Started
1
import Joyride from 'react-joyride';
2
​
3
export class App extends React.Component {
4
  state = {
5
    steps: [
6
      {
7
        target: '.my-first-step',
8
        content: 'This is my awesome feature!',
9
      },
10
      {
11
        target: '.my-other-step',
12
        content: 'This another awesome feature!',
13
      },
14
      ...
15
    ]
16
  };
17
​
18
  render () {
19
    const { steps } = this.state;
20
​
21
    return (
22
      <div className="app">
23
        <Joyride
24
          steps={steps}
25
          ...
26
        />
27
        ...
28
      </div>
29
    );
30
  }
31
}
Copied!
If you need to support legacy browsers you need to include the scrollingelement polyfill.

Props

Last modified 12d ago

Copy link

Contents

Create awesome tours for your app!

Setup

Getting Started