joyride tour react

skip navigation KendoReact Product Bundles DevCraft All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with: NEW : Design Kits for Figma

How to Create Interactive Guided Tours of Web Applications Using React Joyride

Creating interactive guided tours of web apps is an essential tool for improving an application's user experience. That can be easily handled using the React Joyride library. In this post, we look at Joyride and how to incorporate it into a React application.

User experience is critical when talking about the efficiency of web applications. You want to ensure users of your application understand what to do and how to navigate the various sections of the application. Creating an interactive guided tour of your application can solve this issue. It is a self-explanatory way to introduce users to the application and acquaint them with its features.

Although most libraries abstract the inner workings and ease the steps to create interactive guided tours in web applications, the React Joyride library stands out. It is more flexible and allows for some level of customization.

In this post, we will briefly examine the React Joyride library, how it works and how it differs from similar libraries. Additionally, we will create a demo of a landing page and integrate the React Joyride library into it, with some customization. Let’s get started!

Project Setup

Run the following command in your terminal to set up a React application:

Next, run the commands below to navigate into the created project folder and install the React Joyride library.

Run the command below to start your development server:

An Overview of the React Joyride Library

The React Joyride package is well-liked for developing interactive tours of web apps, with more than 5,000 stars on GitHub and an active maintenance system. With React Joyride, users of an application can see its features through an interactive tour, which prompts them to explore specific points of interest and highlights basic functionality.

The React Joyride library targets DOM elements in an application on which it renders a tooltip with the developer-defined description of individual elements. Each tooltip for an element points to and describes the element as defined. Under the hood, the React Joyride library uses react-floater for adequately positioning and styling the tooltip.

Compared to similar libraries, the React Joyride library is less rigid and offers more flexibility and customizability. It allows redefining the library’s theme to meet the application’s requirements. It makes every action and event visible to the user, allowing you to tailor it to your needs. It also includes solutions for the majority of product tour use cases.

To create interactive tours with the React Joyride library, you only need to import its component into your application and pass the required props. In a subsequent section, we will look closely at how we can do this. However, in the next section, let’s create a simple frontend page with which we can work.

Building a Simple Frontend Application

With React installed and our application started, let’s build a demo version of the landing page of an insurance company. After which, we’ll integrate the React Joyride library.

For styling, open the src/App.css file and replace the pre-defined styles with these:

We want a Hero section component for the page that includes a header component. We will also have a Packages component that lists the offers and a Footer component.

In the src folder, create a new folder named components and add a Header.js file to it. Open the src/components/Header.js file and add the following to it:

Here, we defined the Header component. Next, let’s create a Hero.js file in the src/components/ folder and add the code below to it:

Here, we defined the Hero component and rendered the Header component with some dummy text.

Let’s also create a Packages.js file in the src/components folder and add the following to it:

In the code above, we defined a Packages component that returns some sample packages. To add the Footer component, create a Footer.js file in the src/components folder and add the following to it:

Here, we defined the Footer component that renders a simple newsletter form.

Now to bring all these components together, open the src/App.js file and replace the pre-defined code in it with the following:

Here, we imported and rendered the Hero , Packages and Footer components. We also imported the styles we earlier defined in the App.css file.

Save the changes, and preview the application in your browser to see what we have.

Integrating the React Joyride Library

The React Joyride library exports a core Joyride component that we can use to create tours in React applications. The Joyride component expects a required steps prop when rendered. The steps prop is an array of objects used to define the different steps or phases of the tour. The target and content are two essential properties that each object in the array should contain.

The target property accepts a value that points to the appropriate element we want to highlight for a particular step in the tour. It can be a CSS selector or an HTMLElement.

The content property, on the other hand, defines the tooltip’s body. It accepts values that specify the content that gets displayed for the step.

It is important to note that the order by which we define the objects in the steps array is the order by which the tour will go.

To see this in action, replace the content of your src/App.js file like so:

In the code above, we imported and rendered the Joyride component. Then, we defined a steps array and passed it as a prop to the Joyride component. Our tour should have six steps since we defined six objects in the steps array. You can always tweak or change this as you prefer.

Save the changes and test the application in your browser. You should see an animated beacon (a small red-colored circle) on the first element targeted in the steps array. Click on the beacon to start the tour.

Customizing the Tour

As mentioned earlier, one of the advantages of using the React Joyride library is that it is less rigid and allows for customization to a greater extent. In addition to the steps prop, some other props make these customizations a breeze.

In the subsequent sections, we will take a look at some of the other props. However, before we continue, let’s quickly solve a behavioral issue with our tour. You should have noticed that you need to close each step in the tour before moving to the next. The Joyride component also accepts a continuous prop that can be used to solve this. It takes a boolean value that keeps the tour moving when set to true .

Open your src/App.js file and update the Joyride component as shown below:

With that done, you should see a next button that may be used to continue the tour without needing to close it at intervals.

Adding Custom Styles

The current state of our tour shows that the general default theme of the Joyride component does not correspond with the theme of our application. The component also accepts styles props for overriding some default styles. To adjust the overall theme, however, we must nest a special options object within the styles object. Here is the default options object, as seen in the official documentation .

The overall theme takes these values, so to override any of the styles, we need to define it in our options object nested in the styles object and passed as a prop to the Joyride component.

In addition to changing the styles of the overall theme, we can also override the styles of some of the components that come with the Joyride component. For example, we can override the styles for the spotlight , the tooltip component, the beacon component, etc. We only need to define the styles object for each component and add them to the styles object. Click here to see all overridable components defined by the React Joyride library.

Open the src/App.js file and update the Joyride component like so to override some of the default styles:

Here, we changed some styles for the overall theme and the spotlight component to align with the styles of the page.

Save the changes and test the application to see the changes.

Show Tour Progress

To show the tour’s progress, the Joyride component also accepts a showProgress prop. When set to true , the prop displays how far the user has gone with the tour.

We added a new showProgress prop to display the tour’s progress at each step.

Save the file to see the changes in your browser.

Enabling Skip at Each Step

A particular user might already be familiar with the application and immediately want out of the tour. The Joyride component also accepts a showSkipButton prop that, when set to true , adds a skip button that can be used to exit the tour immediately.

Note that the cancel button at the top right of each tooltip only exits a particular step and moves to the next step. The skip button ends the tour entirely.

Open your src/App.js file and update the Joyride component like so:

Here, we added the showSkipButton prop to add a skip button at each step.

Automatically Start Tour on Page Load

Up to this point, we have always had to click on the beacon to start the tour. We can also define the tour to kick-start automatically after the page loads. To effect this, we only need to add a disableBeacon property to the first step of the tour defined in the steps array. When set to true, the disableBeacon property auto-starts the tour on page load.

Open your src/App.js file and update the steps array as shown below:

Here, we added the disableBeacon property to the first step object and set its value to true .

Creating interactive guided tours of web apps is an essential tool for improving an application’s user experience. That can be easily handled using the React Joyride library. In this post, we looked at the React Joyride library and how to incorporate it into a React application. However, you can take this further by diving into the official documentation to learn about other cool things you can do with the library.

Ifeoma Imoh

Ifeoma Imoh is a software developer and technical writer who is in love with all things JavaScript. Find her on Twitter or YouTube .

List of useful premade react hooks, using typescript in react, understand how rendering works in react, all articles.

ASP.NET Core
ASP.NET MVC
ASP.NET AJAX
Blazor Desktop/.NET MAUI
Design Systems
Document Processing
Accessibility

Latest Stories in Your Inbox

Subscribe to be the first to get our expert-written articles and tutorials for developers!

All fields are required

Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.

You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info

By submitting this form, I understand and acknowledge my data will be processed in accordance with Progress' Privacy Policy .

I agree to receive email communications from Progress Software or its Partners , containing information about Progress Software’s products. I understand I may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication received.

By submitting this form, you understand and agree that your personal data will be processed by Progress Software or its Partners as described in our Privacy Policy . You may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication sent by us or our Partners.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here .

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here .

Creating a guided tour in your app with React Joyride

January 27, 2021.

Creating a guided tour on your app with React Joyride 🔥🔥

Guided tours/Walkthroughs/Intros, whatever you want to call it, are an awesome way of showing users how to navigate through your app or how specific features work. A while ago I showed you how to do this in plain JavaScript using IntroJS (tip #231).

Well today we'll be checking 'react-joyride', a really neat library that makes it super simple to create a guided tour on our React app.

So the first thing we need to do is install the library by doing: npm install react-joyride. Then, on the Component we want to use this, we import 'Joyride' and use it by passing some props. There are a lot of props we can use here to customize it - we can even pass our own custom component to make it look how we want to - but the main thing that we need to pass is the 'steps' prop.

If you take a look a look at the 'tourSteps' on the last snippet, this is where we tell exactly what steps we want on our tour and what element they should refer to. Each step is an object that needs to have a 'target' - the element that we want to highlight - and a 'content' - the text that will appear on this step.

By default, Joyride will display a beacon (a red bouncing circle) on the element so that the user can click on it and open the Tour. For this example I didn't want that so I set 'disableBeacon: true' on all of the steps.

If you like this and want to give it a try make sure you check this library on GitHub and see all of the props that you can use here to further customize it.

And that's it guys. What are you thoughts on using these sort of guided tours on applications? Do you find them useful or do they just get in the way? Let me know in the comments 👇😁

User Onboarding Tours made simple with React-Joyride

Sep 12, 2022 · 5 min read

User Onboarding Tours made simple with React-Joyride

Have you ever tried to do a task on a website only to spend a lot of time attempting to identify different features or even not knowing about some functionality?

User onboarding tours, also known as Product walkthroughs, are self-explanatory ways to introduce new users to your app or describe how new features function. They are multi-step, in-app process guides that acquaint users with specific functionalities.

An application’s complexity might make it challenging to explain new features or functionalities to users, especially if you want them to access a lot of crucial data.

User onboarding tours are not just limited to instructing new users but also can be used in other different ways such as:

When a new feature is released, for all users.
In situations where users have not yet mastered more complicated features.
For current users who have been away from the app for a while.

This article will show you how to use a Next.js application to onboard users into a new website and introduce them to essential UI components using the React Joyride Library.

Benefits of a user onboarding tour?

We now know why user onboarding tours are necessary. Let’s examine why you should use one in your Next.js projects.

Lower the cost of customer support : The customer support crew at companies is frequently entrusted with responding to the same user questions, which can be overwhelming. Quality and seamless onboarding will lessen the need for constant support.
Improvements in user engagement : Users are more likely to remain around and utilize your product if the user onboarding route is simple to follow.
Improve/promote the adoption of features : Users are typically notified of the arrival of a new feature to a program via emails. Even though it functions, it is still not very successful because some users may not open their emails to view it or even end up in spam.
Require users to perform specific actions : You can require users to perform specific activities to aid in their familiarization with various functionalities.
Improve user retention : Users frequently lose track of specific features’ locations and how to use particular functions, but getting a tour each time might help them refresh their memory. Additionally, customers will probably not have the patience to search for additional tutorials regarding your app outside of it compared to other alternatives to the user onboarding tour, such as video tutorials and FAQs.

An onboarding tour can provide “aha” moments, but there is a fine line between this and merely upsetting customers’ experiences.

Therefore, it should possess the following qualities:

Be succinct and to the point : Because visitors to your website want to start using your app rapidly, you should respect their time and avoid giving them a lengthy tour that can irritate them throughout the onboarding process. It ought to be brief and to the point.

Order by sequence : Every successful user onboarding experience should adhere to a structure with obvious next steps that advance the user.

Design consistency : To keep consumers attention, employ a consistent design throughout.

Finally, the abundance of available solutions and libraries is one of the main benefits of developing applications in the react ecosystem. There are some existing libraries that can be used to set up user onboarding tours in Next.js application with ease, including React Joyride , React Shepherd , Intro.js React , React Joystick , Walktour , Reactour and also commercial products, such as Whatfix , Walkme , Appcues , etc.

We will stick with the React Joyride Library for this article.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free .

What is React Joyride?

React Joyride is a popular library for creating guided tours for your React applications. It allows developers to select DOM elements and prompt a tooltip, pointing and explaining what that element is.

React Joyride was created by Gilbarbara and had its first version released in 2016. So far has amassed over 4.7k stars on Github.

Its primary objective is to introduce new users to your program or explain how new features work.

The library is continually updated, and assistance is available if you encounter any problems.

How does React Joyride work?

To carry out certain functionalities, the React Joyride library uses a variety of props that can be supplied into the joyride component.

Under the hood, it handles positioning and styling using react-floater .

Large web applications can benefit from its flexibility and customizability to meet their unique requirements.

The React Joyride library offers prebuilt UI components for easy setup, but you also have the option to utilize a custom UI component that best suits your requirements.

Here is an example of an onboarding tour below:

Adding User Onboarding Tour to Next.js App using React Joyride

We will build a simple onboarding tour with the props provided by the library and then will see how to take complete control of the tour using functions and not just props.

To keep the focus of this article entirely on React Joyride, I have set up a starter Next.js application.

Alternatively, you can choose any other Next.js application of your choice and follow along with it.

Let’s clone the starter branch .

Run the following code:

The website ought to be accessible at localhost:3000 .

Building the tour component

Let’s start by adding the new library. In your Node.js environment, run the following command:

First, we create the Tour.js file in the directory components .

Add the following code:

As previously mentioned, the props are the foundation of the React Joyride library. The steps props are the first and most significant props that we will employ. The steps prop is the only required one, which consists of an array of steps.

This array comprises two essential properties target and content .

target : Here, we target the appropriate classNames of the elements we want to highlight in the tour.
content : The content is the information (text) displayed for the users.

After defining the array steps, we must pass it to the steps props in the Joyride component.

Dynamic Tour Component Import

Now go ahead and load the tour component, and we can do that anywhere on the page.

Quick Note: To avoid issues in more recent versions of Next.js, we will need to use dynamic imports.

I will be importing it into the index.js page.

Go to index.js and modify with the code below:

At this point, we have our simple tour up and running.

Click on the beacon (an animated dot) blinking to begin the tour.

Now you will notice that to continue to the next element, we must close the tour.

This is a really awful experience.

To solve this, we will use another prop called continuous .

Pass it into the Joyride component and set it to true .

This will add a next button, and when the user reaches the end of the tour, it changes to last , which stops the tour.

Enabling the skip option at each step

Skip options are very important in your tour because some users might already be familiar with your application and would like to continue without it.

This is very simple to achieve with React Joyride.

We will make use of the showSkipButton prop. This prop will take in a boolean value true .

Show tour progress

Now when a user is taking this tour, we need to show the user how many tour items/features they should expect. It will be in the format (e.g., 1/5).

We can include this by adding the showProgress prop to the Joyride Component. This prop is a boolean, which we will set to true .

note: This should be used together with the showSkipButton prop.

Adding custom styles

You might need to modify the default style of the tour card.

You can do this by simply adding the styles prop with your preferred customization to the Joyride component.

In our code, we can see that the styles prop is an object. It also has other objects with unique keys and values.

tooltipContainer : The key is textAlign , and its value is left.

buttonNext : Its key is backgroundColor , and its value is green.

buttonBack : Its value is 10px, and it has a key called marginRight .

Auto start tour

You can choose to start the tour immediately after the page loads without clicking on the beacon.

Pass a prop called disableBeacon: true to the first step of the step array.

In this article, we looked at the React Joyride Library and how we can use it to add user onboarding tours in Next.js Applications. You can take this a step further and make the tour controlled by button clicks using EVENTS and ACTIONS provided by the library through a callback function.

Here is the link to the complete source code .

React Joyride Documentation

https://react-joyride.com/

Responsive Typography with Clamp

{post.frontmatter.excerpt}

A new lightweight CSS framework to simplify developing a responsive layout

Oct 9, 2023, 6 min read

Responsive mobile layouts made easy with Pure.CSS

Create walkthroughs and guided tours for your ReactJS apps

React joyride.

Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.

If you are using SCSS :

Or include this directly in your html:

Getting Started

Include Joyride in the parent component.

Don't forget to pass a ref to the component.

Please refer to the source code of the demo if you need a practical example .

You can change the initial options passing props to the component.

steps {array}: The tour's steps. Defaults to []

stepIndex {number}: The initial step index. Defaults to 0

run {bool}: Run/stop the tour. Defaults to false

autoStart {bool}: Open the tooltip automatically for the first step, without showing a beacon. Defaults to false

keyboardNavigation {bool}: Toggle keyboard navigation (esc, space bar, return). Defaults to true

locale {object}: The strings used in the tooltip. Defaults to { back: 'Back', close: 'Close', last: 'Last', next: 'Next', skip: 'Skip' }

resizeDebounce {bool}: Delay the reposition of the current step while the window is being resized. Defaults to false

resizeDebounceDelay {number}: The amount of delay for the resizeDebounce callback. Defaults to 200

holePadding {number}: The gap around the target inside the hole. Defaults to 5

scrollOffset {number}: The scrollTop offset used in scrollToSteps . Defaults to 20

scrollToSteps {bool}: Scroll the page to the next step if needed. Defaults to true

scrollToFirstStep {bool}: Scroll the page for the first step. Defaults to false

showBackButton {bool}: Display a back button. Defaults to true

showOverlay {bool}: Display an overlay with holes above your steps (for tours only). Defaults to true

allowClicksThruHole {bool}: Allow mouse and touch events within overlay hole, and prevent hole:click callback from being sent. Defaults to false

showSkipButton {bool}: Display a link to skip the tour. Defaults to false

showStepsProgress {bool}: Display the tour progress in the next button e.g. 2/5 in continuous tours. Defaults to false

tooltipOffset {number}: The tooltip offset from the target. Defaults to 30

type {string}: The type of your presentation. It can be continuous (played sequentially with the Next button) or single . Defaults to single

disableOverlay {bool}: Don't close the tooltip on clicking the overlay. Defaults to false

debug {bool}: Console.log Joyride's inner actions. Defaults to false

callback {function}: It will be called when the tour's state changes and returns a single parameter:

entering a step { type: 'step:before', index: 0, step: {...} }
rendering the beacon { type: 'beacon:before', step: {...} }
triggering the beacon { type: 'beacon:trigger', step: {...} }
rendering the tooltip { type: 'tooltip:before', step: {...} }
closing a step { type: 'step:after', step: {...} }
clicking on the overlay (if not disabled) { type: 'overlay:click', step: {...} }
clicking on the hole { type: 'hole:click', step: {...} }
the target could not be found { type: 'error:target_not_found', step: {...} }
the tour ends. { type: 'finished', steps: [{...}], isTourSkipped: boolean }

The callback object also receives an action string ('start'|'next'|'back') and the step index .

Defaults to undefined

this.joyride.reset(restart)

Call this method to reset the tour iteration back to 0

restart {boolean} - Starts the tour again

this.joyride.next()

Call this method to programmatically advance to the next step.

this.joyride.back()

Call this method to programmatically return to the previous step.

this.joyride.addTooltip(data)

Add tooltips in your elements.

data {object} - A step object (check the syntax below)

this.joyride.getProgress()

Retrieve the current progress of your tour. The object returned looks like this:

Please don't use the start and stop methods anymore. Instead use a combination of the props run and autoStart .

Step syntax.

There are some usable options but you can pass custom parameters.

title : The tooltip's title.
text : The tooltip's content. It can be plain text, html or a React component.
selector : The target DOM selector of your feature (required)
position : Relative position of you beacon and tooltip. It can be one of these: top , top-left , top-right , bottom , bottom-left , bottom-right , right and left . This defaults to top .
type : The event type that trigger the tooltip: click or hover . Defaults to click
isFixed : If true , the tooltip will remain in a fixed position within the viewport. Defaults to false .
allowClicksThruHole : Set to true to allow pointer-events (hover, clicks, etc) or touch events within overlay hole. If true , the hole:click callback will not be sent. Defaults to false . Takes precedence over a allowClicksThruHole prop provided to <Joyride />
style : An object with stylesheet options.

Extra option for standalone tooltips

trigger : The DOM element that will trigger the tooltip

You can style the tooltip UI for each step with these options: backgroundColor , borderRadius , color , mainColor , textAlign and width .

You can also style header , main , footer , button , skip , back , close and hole independently using standard style options. Plus beacon offset, inner and outer colors and arrow visibility.

SCSS Options

$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 4px
$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 : Sass list for drop-shadow. Defaults to (x: 1px, y: 2px, blur: 3px, color: rgba(#000, 0.3))
$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-color
$joyride-skip-button-color : Defaults to #ccc
$joyride-close : Sass list for the close button: Defaults to (color: rgba($joyride-tooltip-color, 0.5), size: 12px, top: 10px, right: 10px)
$joyride-close-visible : Default to true ;

https://gratipay.com/React-Joyride/

React configurable animated svg buttons

Universal react avatar component makes it possible to generate avatars based on user information, you might also like..., a centralized system for displaying and stylizing focus indicators anywhere, a react component for google adsense, keto bodytone review : is the keto diet for developers, subscribe to react.js examples.

Get the latest posts delivered right to your inbox

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications

Implement react joyride across multiple pages as a continuos tour #756

nenadev21 Nov 9, 2021

Beta Was this translation helpful? Give feedback.

Hey @jonamonti Is the Joyride still mounted when you navigate to the other route? From what I understood, it is rendered in one of the routes, so when you navigate to the other route, does it gets unmounted? Try moving it to the App instead.

Replies: 3 comments · 10 replies

Gilbarbara nov 9, 2021 maintainer.

nenadev21 Nov 10, 2021 Author

josetamayo Feb 3, 2022

aiet7 Mar 13, 2024

{{editor}}'s edit, the-able dec 9, 2022.

gilbarbara Dec 9, 2022 Maintainer

The-Able Dec 11, 2022

Gilbarbara dec 11, 2022 maintainer, jonamonti aug 16, 2023, gilbarbara aug 16, 2023 maintainer.

jonamonti Aug 18, 2023

Gilbarbara aug 18, 2023 maintainer.

Numbered list
Unordered list
Attach files

Select a reply

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

Product Management
Solve User-Reported Issues
Find Issues Faster
Optimize Conversion and Adoption
Start Monitoring for Free

Complete guide to building product tours on your React apps

Introduction

Ever heard of tours in product UI?

Product tours are self-explaining tips UI for the website user to break down complex UX and make it easily useable.

Product tours play a vital role in B2B product UI. It helps save customer support time related to repeated ‘how-to-use’ questions about the UX.

What problems do product tours solve?

Product tours help with onboarding users to new and complex UX and helps to get users familiar with UI functionalities. They’re also useful for showcasing new updates on product UI, and they can save time for the customer success team.

Slack, Trello, Asana, and Invision are some of the big products that use product tours for different UX needs.

The indirect alternative to product tours including FAQs about product functionalities, product video demos and tours, and on-demand tips UI.

However, video tours or FAQs don’t have the same level of impact as inline product tours.

The majority of users don’t look for tutorials outside the UI.

On the other hand, on-demand tips UI are similar to product tours and can have a similar impact.

In this post, you’ll learn how to build a simple product tour for your React application. Before building, it you’ll first need to learn about existing React libraries.

Existing React libraries for product tours

Even though product tours are used by lot of companies, there aren’t many React-based tour UIs. Some of the libraries are React Tour and React Joyride.

Over 200k developers use LogRocket to create better digital experiences

React Tour library

React Tour has around 1.4k stars on Github and is moderately active.

It has very nice UI if you need a simple product tour without much customization. If this is the case, React Tour UI will be good enough.

You can view the demo for React Tour here .

How it works

With React Tour, you pass the classname selector and content for each step to the component.

It will render the tour UI based on a button click, or after mounting the component. It’s simple for static pages and UI:

However, if you need to customize for a custom behavior, then it won’t work very well. The component is very rigid, and styles aren’t exposed well enough to make it reusable.

One drawback is that if you don’t use styled-components in your project, then you won’t have any luck using the component. There is no other way — the library has a hard dependency for styled components.

Additionally, if a classname selector is not present in the current screen, then React Tour just displays the non-matched content in the center of the screen. There is no way to hide it.

The only way to overwrite such behavior is to trigger the next steps through our own logic, but that defeats the purpose of the component.

It’s almost as complex as writing your own component for product tours.

React Joyride library

The next famous React product tour library is React Joyride . It has 3k stars on Github and is also actively developed.

The UI isn’t as elegant as React Tours, but the API is less rigid. It allows for some level of customization.

Of course, it has its own limitations.

The docs aren’t good enough if you need custom solution on top of basic React tour functionality. The props API also isn’t very intuitive or simple.

The only difference is that it has solutions for most use cases in product tours. They expose all the events and actions to the end user, so you can capture those actions and do whatever customization you want.

Building a simple product tour in a React app

First, let’s build a simple React tour without any custom functionality.

We’ll use react-dashboard by creative tim as our base application.

This loads the product tour on top of it.

This is what the dashboard UI looks like:

We’ll do a product tour on this UI. You can see the final product tours UI here .

Let’s create the simple product tour component:

Load this tour component anywhere on the page to load the blinking beacon UI. If you click that beacon, it will open the tour. The next button will let you navigate til the end of the tour.

Joyride components take a lot of props. The most important ones are steps props. It accepts an array of objects with target selector elements and content.

Continuous props are used for showing the next button on each step.

You can see the demo for this simple tour component here .

Now let’s add more features and make our product tour more customized. Simple features are:

Skip option on each step

Change locale text labels
Hide / show buttons (next, skip, back buttons)

Custom styles like button colors and text alignment

Then we’ll add the custom feature like:

Auto start the tour
Start the tour by manual triggers (i.e., through link or button click)
Hide blinking beacon
Auto start tour once and only show tour on manual triggers next time

Most of the basic functionalities can be achieved through the props provided by Joyride docs .

Adding showSkipButton to true will do the trick. Skip link will skip the remaining step on the tour.

How to change text labels for buttons and links

Let’s change the last button text as end tour and skip button text to close tour .

How to hide Back, Next and Skip buttons

For the Skip button, use *showSkipButton* props
For the Back button, use hideBackButton
For the Next button, use continuous props

Unlike other props, continuous props work differently. They either show the Next button or show a Close button, depending on the boolean value passed to the props.

You can see how inconsistent the props API naming are. It isn’t very easy to find lot of hidden features unless you read the complete docs for Joyride couple of times 😅

Styles are exposed as an object. So if you pass a style object to the component, the component will merge it with their default styles.

A caveat to this way of styling is that it only supports a handful of the object styles, which are already defined on the component.

It won’t allow you to customize everything on an element level. Also, the classnames used in the rendered elements are not very easy to customize.

However, the library exposes props to use your own elements instead of the default elements.

Some of the components are:

Beacon component ( beaconComponent prop)
tooltip component ( tooltipComponent prop)

Controlled product tour

So far, you’ve learned how to use the Joyride library to create a basic product tour and customize it using props.

You’ve also seen some of the limitations to styling the component.

Until now, the tour has been controlled in the library. You just pass the steps and tweak some props.

It’s possible to control the tour and trigger goto a particular step directly through button click, but it requires some coding.

We’ll see how to do it by achieving a few of the features.

The Joyride component exposes some of the actions and events through callback. You need to capture the callback and, based on the function, you can customize your functionality.

It’s simple to make the component controlled by passing a prop stepIndex .

stepIndex is the index number and starts from 0. Once you pass the values, the Next and Back button clicks need to be handled by you.

Let’s get to it. First, we will define the steps:

Here’s the initial state to make the component controlled:

To auto start the tour, you need to pass disableBeacon: true in the first step. This will just disable the beacon. But you need to trigger start by changing the state run: true :

The actions that are important to make the functionality are Close button click, Skip button click, Next, and Back button click.

Let’s implement the reducer function:

Now we’ll listen to the events and dispatch proper state changes to manage the tour:

Here’s a quick overview of how each action, event, and state update works:

If the Close button, Skip button, or End Tour button are clicked, then STOP the tour. Meanwhile, if the Next or Back button are clicked, then check whether the target element is present in the page.

If the target element is present, then go to that step. If it’s not present, find the next step target and iterate.

Joyride expose EVENTS, STATUS, and ACTION labels. You can use those to listen to the callback event without hardcoding it.

Let’s also auto start the tour when the page loads:

You can even trigger the start of tour using button click:

Right now, we have it set up so that the tour will be shown every time you refresh the page.

If you only want to show the tour once and then trigger it only through manual click, you can do so using localStorage .

You can find the working example code here and the demo here .

Steps for building a custom product tour in React

We’ve achieved the product tour using the Joyride library.

But what if we need to create our own?

Let’s walk through building a tour component.

The biggest challenges to building tour components include finding the target element and showing a popover component, as well as ensuring the popover component calculates the available window space and automatically displays by the target element.

It can also be difficult to ensure the tour component is reusable and that styles are easily extended.

To build a custom tour component in React, it’s easiest to isolate the functionality and component UI with these React Hooks:

useTour – a custom Hook to build your own UI on top of functionality
Tour – a dumb UI component that consumes useTour to load the tour portal UI

This mock code shows how useTour works:

I hope this article helped you learn the tricks of creating product tour components in your React application. Let me know your experience on tour UX in the comments 🤗

Get set up with LogRocket's modern React error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID

Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side

Stop guessing about your digital experience with LogRocket

Building web-based terminal components with Termino.js

Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.

How to build a custom GPT: Step-by-step tutorial

Let’s see why and how to build custom GPTs — personalized versions of ChatGPT that act as custom chatbots to serve a specific purpose.

Jest adoption guide: Overview, examples, and alternatives

Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.

Implementing LiveViews in Node.js

Explore LiveViewJS and how to build a full-stack Node.js app with LiveViews that supports real-time interactivity.

Nike Air Zoom Victory Tour 3

Men's golf shoes.

Select Size

Designed for the all-day grinders and dawn-patrollers, destined for the feet of the dedicated that just moseyed back to the driving range after 18. They give you robust comfort and unreal energy return, whether you're swinging through or playing through, while all-new spikes offer exceptional traction from tee to green. Plus, the old-school look will earn a knowing head nod from your peers after picking your putt out of the cup.

Shown: White/Black/Lightning/Team Red
Style: DV6798-104

Shipping & Returns

Reviews (18).

Write a Review

Great Looks, Decent Comfort

Clipper40 - Apr 11, 2024

Slight upgrade over last years model. I like the improved lacing system which seems to hug my foot better. I do think last year's Tour 2 had better cushion or "bounce" to the insole. This year's model feels much firmer to me which is disappointing. I was hoping they would soften up after a few rounds but that doesn't seem to be the case so far. Probably wouldn't have bought 3 colors knowing what I know now. ...

Incredible upgrade from the version 2

Ernestos321527017 - Mar 24, 2024

I have three pairs of these, having replaced my two previous Victory Tour 2's that I had for two years. These have much better support and hug my feet better giving me more confidence taking big swings with the driver. Excellent traction and I do not get sore feet at all after a long round of 18 holes. Nike made some great improvements in the looks of this shoe as well. Much better contours and the finish of the leather is a lot more appealing with the pebble finish and perforated venting. A great shoe, my favorites to wear and that is with a collection of 12 golf shoes to choose from. ...

Golf Shoe review

KenR802697836 - Mar 18, 2024

By far the best golf shoe I’ve ever worn. I’m a Walker and highly recommend these. I bought another pair in black . They run true to size . I love them

More Reviews

Complete the Look

Feel the Grip

The all-new Tour Flex Pro from Softspikes® in the key 3 forefoot spike locations and Silver Tornado spikes in the lateral and heel offer exceptional traction in all conditions and give your feet great grip on the ground when you’re going all out for the pin.

All-Round Response

We stitched a Zoom Air unit directly to the upper instead of being set into foam, so it responds to every step. A full-length plate beneath the Air unit helps increase energy return. Cushiony foam under the heel delivers an extremely smooth ride.

Old-School Look

Full-grain leather has a supple feel and sophisticated look, nodding to golf shoes from past generations.

Locked-In Feel

An internal strap stretches over then secures your foot, conforming to its shape.

More Benefits

Molded 3-D collar helps you stay stabilized.
Internal foam pods cushion your heel.

Product Details

2-year waterproof warranty

Regent Seven Seas Cruises

Best of Moscow by high speed train

By shuguley , February 15, 2014 in Regent Seven Seas Cruises

Link to comment

Share on other sites.

If you are considering this on the 2015 June Baltic cruise on Voyager; my suggestion is don't. There is so much to do in St. Petersburg and although a train is one of my favorite ways to travel the time would be far better spent in St. P.

Thanks for the advice. Yes, this would be on the Voyager during the 2015 season but not yet sure exactly which cruise.

We did the Moscow excursion "on a different luxury line", but from your brief description it sounds very much like the same trip, so I will operate on that assumption. It is a VERY long day! We left the ship at 5:30 AM and returned at 12:30 AM. The highspeed train trip is comfortable, and while they call it "Business Class" it does not compare well to the equivalent class on say Rail Europe. When we did it in 2011, we did have highspeed both ways, and the trip back seemed much longer as the adrenaline and excitement had worn off!:D

Moscow itself is not that terribly different from any other big city in the world, but this Cold War kid never thought he would ever stand in Red Square, never mind walk the grounds of The Kremlin, or tour The Kremlin Palace, or see (but not visit) Lenin's Tomb, or visit The Armoury. But he did, and he loved every minute of it! Yes, it is a long day, and you barely scratch a scratch on the surface, but it is worth it. There is a tremendous amount to see in St. Petersburg, but every Baltic cruise goes to St. Petersburg, so you can go back if you choose to. Not every cruiseline offers you the chance to see Moscow.

I have not personally done this tour, but our last time in St Petersburg, the private guide that we hired for a day was leading the regent tour to Moscow on the high speed train the next day. He said it was way better than the previous alternative, which was flying to Moscow and back. He said that you actually got to Moscow faster because you didn't have to deal with airline checkin etc. it did seem like a very long day to me, and there is so much to see and do in st. Petersburg that I didn't consider doing it.

countflorida

We toured to Moscow from St. Petersburg via the hi-speed SAPSAN train last September, from a Baltic cruise on the Oceania Marina. You need to have a two-night, three day port call in St. Petersburg to take this tour because the tour typically leaves the ship around 5:00 - 5:30 AM and doesn't return until after midnight the next day. We didn't take the ship's tour; we made private arrangements with TravelAllRussia for three days of touring, the first and third days in St. Petersburg and the second day the tour to Moscow by train. Our cost for the private tour for three days was about the same as what the ship charged for the excursion to Moscow alone. There are a number of private tour agencies that operate in St. Petersburg and offer the Moscow train tours; we would strongly recommend them over the ship's tours.

All three days had private guides with car and driver. The second day, the driver picked us up at the ship and took us to the train, but we were alone on the train, and met in Moscow by the guide on the station platform. After our tour and dinner, we were brought back to the train and after the return train trip met by the driver and taken back to the ship. Because you are alone on the train you must have your own Russian visas.

If this is your first visit to St. Petersburg, I would agree there is much more to see there. We found Moscow somewhat a disappointment, particularly Red Square. The Kremlin and the cathedral in Red Square were also worth seeing. But the best thing we saw was the Moscow subway! I worked for the Washington Metro system back in the 1980s as it grew from 40 to 80 miles and although I was in the computer area, I learned a lot about the challenges of running a subway system. We used the Moscow system to get across the city from where we had dinner to the train station, and I was amazed at the cleanliness', speed of operation, the short headways maintained, and the courtesy of everyone involved. A very impressive experience!

We had been to St. Petersburg before, and so had the time to take a day and go to Moscow. Also, I really like trains, and the SAPSAN is a German train set running on Russian rails. Seats are like first class domestic air, spacious but not too plush or comfortable, but with enough room. Not too much recline, and almost 8 hours on the train in two shots is a lot for an old man. They come through and sell drinks, candy, etc. but the sellers don't speak English and no one around us helped, so we had just poor coffee once coming, and brought stuff with us for the trip back. Not too much to see from the train either, particularly on the return when it is night the whole way.

If you decide to go, take a private tour and avoid the overly expensive ship's tour. I'm glad we did it, but wouldn't bother to repeat the tour; we've seen Moscow.

Thanks so much to all of you for the thorough and thought insight. Yhe information you have provided is most helpful.

countflorida: Your detailed post is very helpful. We are not quite ready for a Baltic cruise but should do so within a year. Time enough to do our pre travel research, bookings and visa gathering.:) Thank you!

Emperor Norton

Sure would appreciate someone who has taken "Best of Moscow by high speed train" from St. Petersburg could please share their impressions of this shore excursion. From the description this sounds like a very long day. Wondering how the 4 hour train trip was in terms of accommodations, etc. Also what time did you leave the ship and what time at night did you return? Were both legs of the trip on the high speed rail (I read that slower trains also travel the same tracks)? My wife and I are considering this excursion. We thought that if we are making all the effort to go to Russia then how could we pass up going to Moscow, walking in Red Square, seeing St. Basil, etc.

I did this on Seabourn. IMO DONT. Take Aeroflop (er Aeroflot). The train has non folding seats where you are literally knee to knee with your fellow passenger (facing each other). Further they don't believe in air conditioning. It's also the worlds slowed bullet train. I think I would have found more enjoyment wandering around the St. Petersburg and Moscow airports.

Countflorida,

This is a little off topic,, however we had planned a river cruise in Russia but decided we would rather stay on land and have booked about two weeks with Travel-All-Russia using the private guide and driver. I'm curious as to how you found them as a tour company.

The guides they provided were fine. We had a different guide each of the days in St. Petersburg, but both were flexible, pleasant, knowledgeable and spoke English very well, as did the guide in Moscow, incidentally. She was a bit aloof, distant, not too friendly, but otherwise fine. In fact, she was the one who suggested taking the Metro, which unexpectedly became one of the highlights of the Moscow excursion. If I have a complaint with AllTravelRussia, it is with their plan and its execution (more later).

I had requested emphasis on World War II (in Russia, the Great Patriotic War) sites and info. In scheduling us, they weren't careful about dates and a couple of the sites we wanted to see were scheduled on the third day, after we'd been to Moscow. But both sites were closed that day of the week, and that info was readily available, right on web sites describing them. Also, the included meals (lunches in St. Pete, dinner in Moscow) were not what we asked for: light meals with some choices, so we could avoid things we didn't like and choose things we did like. My request was ignored; we were given full Russian meals with a fixed menu, no choice. On the first day, a fish dish was the entre, but I am allergic to fish. Fortunately, I had the e-mail I'd sent with me and showed it to the guide, and she was able to change my entre to chicken, which was very good actually. But we didn't want a 3-4 course lunches or dinner (in Moscow). We had the guide drop the lunch the third day, although we never got any credit or refund. But, particularly in contrast to the ship's tours, the prices were so reasonable we didn't worry too much about it.

The people who were on the ship's tour to Moscow saw us boarding the same train for which they were forced to queue up and wait on the way back, and asked us what we had done. I was candid and open so they were not happy when I explained what we had arranged and particularly what it had cost. Also, when we returned to the ship, we found they had laid on a late supper for those who had gone to Moscow, so up we went and had something. Well, it turns out the late supper was supposed to be just for those on the ship's tour, but we and others on 'independent' tours, there were a dozen or more of us, crashed the party, actually got there first, and they didn't realize it until the larger group arrived and there weren't enough tables/places set. By that time, the 'independents' had all gotten served and were eating; what could they do?

A couple from the larger group sat down with us and asked us about our tour, and they were the ones I told about our arrangement and its cost. They turned to others who’d been with them and announced the details, loudly enough so the whole room heard, which started a lot of bitching and complaining. I gathered they weren't very happy with the ship's tour to begin with, and this was the straw that broke the camel's back. We finished up and beat it out of there, but overheard later that one of the excursion staff came to check on something and ran into a real mess. I caught a cold on the trip, which forced me to bed the second day following in Tallinn, so by the time we reappeared we heard about the contretemps' but apparently no one recalled who started it, thankfully.

Because of what happened to us, I would probably not use AllTravelRussia if I were to go again, or if I did, I would be sure to get confirmation of every detail of the tour. They do have good reviews generally, and we were certainly helped by their visa department and liked the guides and drivers. Their weakness, I say now with full 20:20 hindsight, is that once the sales person who plans the tour, sells it to you and collects your money, he (or she) transfers the plan to their Russia office for implementation; there is no follow-up to make sure it gets done right. And that is where our problems arose; we paid for a custom tour but got a standard package with a few destinations switched, and no one checked them out, even to see when they were open the day we were scheduled to go. If you check every detail that’s important to you, it should be OK, but that’s a hell of a way to have to do business, in my opinion.

Thank you for the 20/20 hindsight observation on your Russian tour operator, and better priced than the ship's excursion cost.

Thanks very much for the feedback.

We had the same experience as you so far as price. We originally booked a Viking Cruise but, hearing some things about the river cruises that made us unhappy, looked into other options. T-A-R cost the same or less than a cruise and had us in hotels for 11 days. We opted for the private tour. They have three tour levels, based on hotels. We originally opted for the four star as it did not cost much more than the three star hotels. Finally we decided to throw it all in and upgraded to five star. In Moscow we will be at the newly opened Kempinsky which is two blocks from Red Square. In St. Petersburg it is the Grand Hotel Europe, one of the most vaunted luxury hotels in Russia. Location is important for us as the tours use up only part of the day so being in the center of everything for our independent touring is important. As with many other cities, the less you pay, the farther out of the center of town you are.

We have been working with our salesman in D.C. and he seems to get back to us with the changes we want. He recently returned from Russia so is up on everything. When I asked they said they paid the full TA commission if I wanted so I got my usual TA on board so he is watching our back and giving us that extra level of comfort. He also set up our air, which I know pays him little or nothing, and got us business class for much less than T-A-R wanted for economy, though it took working for a while with a consolidator. He's happy to get his 10 percent on this trip without having booked it. He also took care of the trip insurance. We've been doing a lot of research on the CC sister site Trip Advisor and will write a report there. We will, I guess, become a source of info for CC members after having spent 5 days in Moscow and 6 in SP.

4 months later...

scubacruiserx2

Anybody considering a day trip to Moscow from St. Petersburg on the Sapsan may want to look at our travelogue filled with pictures.

http://boards.cruisecritic.com/showthread.php?t=1927687

Very informative. Thanks dor sharing. Jeff

Please sign in to comment

You will be able to leave a comment after signing in

Welcome to Cruise Critic
ANNOUNCEMENT: Set Sail Beyond the Ordinary with Oceania Cruises
New Cruisers
Cruise Lines “A – O”
Cruise Lines “P – Z”
River Cruising
Cruise Critic News & Features
Digital Photography & Cruise Technology
Special Interest Cruising
Cruise Discussion Topics
UK Cruising
Australia & New Zealand Cruisers
Canadian Cruisers
North American Homeports
Ports of Call
Cruise Conversations

Announcements

New to Cruise Critic? Join our Community!

Write Your Own Amazing Review !

Click this gorgeous photo by member SUPERstar777 to share your review!

Features & News

LauraS · Started 16 hours ago

LauraS · Started Wednesday at 07:36 PM

LauraS · Started Wednesday at 12:53 AM

LauraS · Started Tuesday at 07:17 PM

LauraS · Started Monday at 10:08 PM

Existing user? Sign in OR Create an Account
Find Your Roll Call
Meet & Mingle
Community Help Center
All Activity
Member Photo Albums
Meet & Mingle Photos
Favorite Cruise Memories
Cruise Food Photos
Cruise Ship Photos
Ports of Call Photos
Towel Animal Photos
Amazing, Funny & Totally Awesome Cruise Photos
Write a Review
Live Cruise Reports
Member Cruise Reviews
Create New...

react-joyride

2 Dependencies
152 Dependents
124 Versions

React Joyride

View the demo here . [ source ]

Include Joyride in the parent component before anything else.

Don't forget to pass a ref to the component.

If your are using SCSS (and you should):

Or include this directly in your html:

Getting Started

Add a custom function to include steps to your state in your own component

Add steps/tooltips after your components are mounted.

Or you can start the tour after a criteria is met

Please refer to the source code of the demo if you need a practical example .

You can change the initial options passing props to the component. All optional.