Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-joyride

Package Overview
Dependencies
Maintainers
1
Versions
137
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-joyride

Create walkthroughs and guided tours for your apps

  • 1.2.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
250K
decreased by-9.18%
Maintainers
1
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 10 Mar 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc