react-joyride
Advanced tools
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.
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;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 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 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.
View the demo here.
npm install --save react-joyride
var react = require('react/addons');
var joyride = require('react-joyride').Mixin;
var App = React.createClass({
mixins: [React.addons.PureRenderMixin, joyride],
...
});
This mixin changes state often so you should use React.addons.PureRenderMixin in your components as well.
If your are using SCSS:
@include 'react-joyride/lib/styles/react-joyride'
Or include this directly in your html:
<link rel="stylesheet" href="react-joyride/lib/styles/react-joyride.css" type="text/css">
Add steps to your tour after your component is mounted.
this.joyrideAddSteps([{...}])]
Start the tour with:
this.joyrideStart()
joyrideLocale (object): The strings used in the tooltip. Defaults to { back: 'Back', close: 'Close', last: 'Last', next: 'Next' }joyrideScrollOffset (number): The scrollTop offset used in joyrideScrollToSteps. Defaults to 20joyrideScrollToSteps (bool): Scroll the page to the next step if needed. Defaults to truejoyrideShowBackButton (bool): Display a back button. Defaults to truejoyrideShowOverlay (bool): Display an overlay with holes above your steps. Defaults to truejoyrideShowStepsProgress (bool): Display the tour progress in the next button (1/5) in guided tours. Defaults to falsejoyrideTooltipOffset: (number) The tooltip offset from the target. Defaults to 30joyrideType (string): The type of your presentation. It can be guided (played sequencially with the Next button) or single. Defaults to guidedjoyrideCompleteCallback (function): It will be called after an user has completed all the steps in your tour and passes all steps. Defaults to undefinedjoyrideStepCallback (function): It will be called after each step and passes the completed step. Defaults to undefinedYou can change these in componentWillMount. All optional.
Example:
componentWillMount: function () {
this.setState({
joyrideLocale: {
back: 'Voltar',
close: 'Fechar',
last: 'Último',
next: 'Próximo'
},
joyrideStepCallback: function(step) {
console.log(step);
},
joyrideCompleteCallback: function(steps) {
console.log(steps);
}
...
});
}
Add steps to your tour. You can call this method multiple times even after the tour has started.
steps {object|array} - Tour's stepsstart {boolean} - Starts the tour right away (optional)this.joyrideAddSteps([
{
title: "", //optional
text: "...",
selector: "...",
position: "..."
},
...
]);
Call this method to start the tour if it wasn't already started with this.joyrideAddSteps()
autorun {boolean} - Starts the tour with the first tooltip opened.Retrieve the current progress of your tour. The object returned looks like this:
{
index: 2,
percentageComplete: 50,
step: {
title: "...",
text: "...",
selector: "...",
position: "..."
}
}}
There are 4 usable options but you can pass extra parameters.
title: The title of the tooltip (optional)text: The tooltip's body (required)selector: The target DOM selector of your step (required)position: Relative position of you beacon and tooltip. It can be one of these: right, left, top, top-left, top-right, bottom, bottom-left, bottom-right and center. This defaults to top.Example:
{
title: 'First Step',
text: 'Start using the joyride',
selector: '.first-step',
position: 'bottom-left',
...
name: 'my-first-step',
parent: 'MyComponentName'
}
$joyride-color: The base color. Defaults to #f04$joyride-zindex: Defaults to 1500$joyride-overlay-color: Defaults to rgba(#000, 0.5)$joyride-beacon-color: Defaults to $joyride-color$joyride-beacon-size: Defaults to 36px$joyride-hole-border-radius: Defaults to 4px$joyride-hole-shadow: Defaults to 0 0 15px rgba(#000, 0.5)$joyride-tooltip-arrow-size: You must use even numbers to avoid half-pixel inconsistencies. Defaults to 28px$joyride-tooltip-bg-color: Defaults to #fff$joyride-tooltip-border-radius: Defaults to 8px$joyride-tooltip-color: The header and text color. Defaults to #555$joyride-tooltip-font-size: Defaults to 16px$joyride-tooltip-padding: Defaults to 20px$joyride-tooltip-shadow: Defaults to drop-shadow(2px 4px 4px rgba(#000, 0.5))$joyride-tooltip-width: Sass list of Mobile / Tablet / Desktop sizes. Defaults to (290px, 360px, 450px)$joyride-header-color: Defaults to $joyride-tooltip-header-color$joyride-header-font-size: Defaults to 20px$joyride-header-border-color: Defaults to $joyride-color$joyride-header-border-width: Defaults to 1px$joyride-button-bg-color: Defaults to $joyride-color$joyride-button-color: Defaults to #fff$joyride-button-border-radius: Defaults to 4px$joyride-back-button-color: Defaults to $joyride-colorCopyright © 2015 Gil Barbara - MIT License
Inspired by react-tour-guide and jquery joyride tour
FAQs
Create guided tours for your apps
The npm package react-joyride receives a total of 192,402 weekly downloads. As such, react-joyride popularity was classified as popular.
We found that react-joyride demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.