React Joyride
Create a tour for your app!
Use it to showcase your app for new users! Or explain functionality of complex features!
here
View the demoYou 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
This library uses react-floater and popper.js for positioning and styling.