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.
Last modified 12d ago