React Joyride
Overview
Search…
Overview
Props
Step
Styling
Custom Components
Callback
Constants
Accessibility
Migration
Powered By
GitBook
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.
Next
Props
Last modified
9mo ago
Copy link
Outline
Create awesome tours for your app!
Setup
Getting Started