react-joyride

What is react-joyride?

react-joyride is a React component that helps you create guided tours for your web applications. It allows you to highlight elements, provide step-by-step instructions, and enhance user onboarding experiences.

What are react-joyride's main functionalities?

Creating a Basic Tour

This code demonstrates how to create a basic tour with react-joyride. It defines a series of steps, each with a target element and content, and then renders the Joyride component with these steps.

import React from 'react';
import Joyride from 'react-joyride';

const App = () => {
  const steps = [
    {
      target: '.my-first-step',
      content: 'This is my first step!'
    },
    {
      target: '.my-second-step',
      content: 'This is my second step!'
    }
  ];

  return (
    <div>
      <Joyride steps={steps} />
      <div className="my-first-step">First Step</div>
      <div className="my-second-step">Second Step</div>
    </div>
  );
};

export default App;

Customizing Tour Appearance

This code shows how to customize the appearance of the tour. You can change the primary color, z-index, and other styles to match your application's design.

import React from 'react';
import Joyride, { STATUS } from 'react-joyride';

const App = () => {
  const steps = [
    {
      target: '.my-first-step',
      content: 'This is my first step!',
      styles: {
        options: {
          zIndex: 10000,
        }
      }
    }
  ];

  return (
    <div>
      <Joyride
        steps={steps}
        styles={{
          options: {
            primaryColor: '#e91e63',
            zIndex: 10000,
          }
        }}
      />
      <div className="my-first-step">First Step</div>
    </div>
  );
};

export default App;

Controlling Tour Programmatically

This code demonstrates how to control the tour programmatically. You can start the tour with a button click and handle the tour's status changes using a callback function.

import React, { useState } from 'react';
import Joyride, { STATUS } from 'react-joyride';

const App = () => {
  const [run, setRun] = useState(false);
  const steps = [
    {
      target: '.my-first-step',
      content: 'This is my first step!'
    }
  ];

  const handleJoyrideCallback = (data) => {
    const { status } = data;
    if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      setRun(false);
    }
  };

  return (
    <div>
      <button onClick={() => setRun(true)}>Start Tour</button>
      <Joyride
        steps={steps}
        run={run}
        callback={handleJoyrideCallback}
      />
      <div className="my-first-step">First Step</div>
    </div>
  );
};

export default App;

Other packages similar to react-joyride

reactour

reactour is another React library for creating guided tours. It offers a simple API and is highly customizable. Compared to react-joyride, reactour is more lightweight but may lack some advanced features.

shepherd.js

shepherd.js is a JavaScript library for creating guided tours that can be used with React. It provides a more flexible and powerful API compared to react-joyride, but it requires more setup and configuration.

intro.js

intro.js is a standalone JavaScript library for creating step-by-step guides and feature introductions. It can be integrated with React and offers a wide range of customization options. It is more feature-rich but also more complex to use compared to react-joyride.

README

React Joyride

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!

View the demo here (or the codesandbox examples)

Read the docs

Talk about it on the Discussions board.

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.

Development

Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes

Now clone https://github.com/gilbarbara/react-joyride-demo and run:

npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start

Start coding! 🎉