Search
K

Overview

Joyride example image

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 React, { useState } from 'react';
import Joyride from 'react-joyride';
/*
* If your steps are not dynamic you can use a simple array.
* Otherwise you can set it as a state inside your component.
*/
const steps = [
{
target: '.my-first-step',
content: 'This is my awesome feature!',
},
{
target: '.my-other-step',
content: 'This another awesome feature!',
},
];
export default function App() {
// If you want to delay the tour initialization you can use the `run` prop
return (
<div>
<Joyride steps={steps} />
...
</div>
);
}
If you need to support legacy browsers you need to include the scrollingelement polyfill.
Last modified 8d ago