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 a tour for your app!
Use it to showcase your app for new users! Or explain functionality of complex features!

View the demo here

You 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

Props

Step

Styling

Callback

Constants

Migration from 1.x

This library uses react-floater and popper.js for positioning and styling.