Overview

Create awesome tours for your app!

Showcase your app to new users or explain the functionality of new features.

It uses react-floater for positioning and styling. You can also use your own components.

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>
  );
}

To support legacy browsers, include the scrollingelement polyfill.