A Practical Guide To Product Tours In React Apps — Smashing Magazine (2023)

Blessing Krofegha
Aug 6, 2020
0 comments

13 min read
UI,Apps,React

About The Author

Blessing Krofegha is a Software Engineer Based in Lagos Nigeria, with a burning desire to contribute to making the web awesome for all, by writing and building …More aboutBlessing↬

Email Newsletter

.
Trusted by 200,000+ folks.

Architecting Design Systems with Nathan Curtis

(Video) Laser pointers can blind pilots

Showcasing new product features to users or familiarizing them with some UI functionality in a web app can get tedious, especially when you want users to see a lot of things. In the following guide, you’ll learn how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app.

As stated on Appcues:

“Product tours — sometimes called product walkthroughs — introduce users to a new product and help them find their bearings.”

Usually, when it needs to showcase a new feature or complex UI functionality in a web app, the customer-success team would send a campaign email to all of its users. While this is a great way to create such awareness, some users might not have the opportunity to see the added feature; hence, the purpose of the email would be defeated.

A better way to increase user awareness of a particular feature in a web app is by integrating concise, self-explanatory UI tips, called product tours.

Product tours guide users to “a-ha” moments, or showcase high-value features that are being underused. Product tours can be powerful tools to introduce users to a new product and to help them find their bearings. They can draw attention to product launches, promo offers, and product sales.

But when done wrong, product tours can end up feeling like a backseat driver. And no one likes a backseat driver, do they?

In this tutorial, you’ll learn about what a product tour is and the types of product-tour packages in the React ecosystem, along with their pros and cons.

If you’re building customer-facing products using React, then you might be keen to implement this in your React application. By the end, we’ll have built a product tour for a simple shopping-cart UI using React Joyride.

We won’t go through React and JavaScript’s syntax basics, but you don’t have to be an expert in either of these languages to follow along.

A Practical Guide To Product Tours In React Apps — Smashing Magazine (7)

Product Tour Guidelines

Product tours are a tricky aspect of web apps, requiring some user-experience expertise to drive results. I’d recommend going through Appcues’ tips for product tours. The following are a few guidelines to consider.

Never Lecture

Putting a lot of tours on a web page is tempting. But users are usually not keen on long introductory tutorials. They become anxious when they have to ingest a lot of information before being able to use a feature in the app.

Break It Down

Don’t teach everything. Focus on a single feature, and create a tour of two to three steps to showcase that feature. Show many small tours, rather than a single long tour. Prioritize their sequence.

Add Value

Do you enjoy taking your own tour? How about your teammates? Present the tour in such a way that users will understand. Showcase value, rather than stories.

Now that we know the value of product tours and seen some guidelines for building them, let’s cover some React libraries for product tours and learn how to use them.

(Video) What Happens To Your Body After You Die? | Human Biology | The Dr Binocs Show | Peekaboo Kidz

There are only a few React-based libraries for implementing tours. Two of the most popular are React Tour and React Joyride.

More after jump! Continue reading below↓

React Tour

React Tour has around 1,600 stars on GitHub and is being actively developed. The best use case for React Tour is a simple product tour in which little customization is required. A demo is available.

How It Works

With React Tour, you pass the className selector and content for each step to the component. The library will render the tour’s user interface based on a button click, or after you’ve mounted the component. It’s simple for static pages and UIs:

 const steps = [ { selector: '.first-tour', content: 'This is the content for the first tour.', }, { selector: '.second-tour', content: 'Here is the content for the second Tour.', } // ...]

Pros

React Tour is best for tours that need little customization.
It works well for static content and for dynamic content whose selector labels always exist in the UI.
Fans of styled-components might find it interesting because it has a hard dependency on styled-components.

Cons

If your project has no dependency on styled-components, then you might not find it easy to implement.
Your creativity will be limited because it doesn’t support customization.

React Joyride

The other main product-tour library is React Joyride, which has about 3,100 stars on GitHub and is also actively maintained.

How It Works

We pass the className as a target and the content. The state stores the tour. The Joyride component uses steps as props.

 state = { steps: [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This is another awesome feature!', }, ... ] }; render () { const { steps } = this.state; return (   ... 
 ); }}

Pros

Integrating React Joyride in a web app is less rigid than with React Tour, and it has no hard dependency on other libraries.
Events and actions are made available, which fosters customization.
It’s frequently improved.

Cons

The UI isn’t as elegant as React Tour’s.

Why React Joyride?

Product tours, especially for really big web apps, require customization, and that sets React Joyride apart from React Tour. The example project we’ll make demands some creativity and customization — hence, we’ll go with React Joyride.

Building A Simple Product Tour

First, we’ll build a simple React tour using the props available to us in React Joyride. Next, we’ll use the useReducer hook to automate the tour’s processes.

Clone the “standard-tour” branch in the GitHub repository, or use the web page of your choice, as long as you’re able to follow along.

Install the packages by running npm install.

To start the app, run npm run start.

We’ll be covering the following steps:

define the tour’s steps;
enable a skip option in each step;
change text labels on buttons and links;
customize styles like button colors and text alignment.

Then, we’ll add some custom features:

autostart the tour;
start the tour manually (i.e. with a link or button click);
hide the blinking beacon.

The props in React Joyride enable us to perform some basic functionality.

(Video) Creating Themeable Design Systems with BRAD FROST - SmashingConf San Francisco 2022

For this tutorial, we’ll build a product tour of the UI shown below:

A Practical Guide To Product Tours In React Apps — Smashing Magazine (8)

Define The Tour’s Steps

To begin with, ensure that you’re targeting the particular classNames that will hold the content of the tour on the page — that is, according to whether you’ll be using your UI instead of the shopping-cart UI.

In the component folder, create a Tour.js file, and paste the following code into it. Also, ensure that the target classNames exist in your style sheet. Throughout this article, we’ll tweak the Tour.js component to suit the task at hand.

import React from "react";import JoyRide from "react-joyride";const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour’s logo", }, { target: ".tour-cart", content: "View the cart you’ve added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", },];

What we’ve done is simply define our tour’s steps by targeting the classNames that will form the bedrock of our content (the text). The content property is where we define the text that we want to see when the tour starts.

Enable Skip Option in Each Step

A skip option is important in cases where a user isn’t interested in a particular tour. We can add this feature by setting the showSkipButton prop to true, which will skip the remaining steps. Also, the continuous prop comes in handy when we need to show the Next button in each step.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} /> </> );};

Change Text Labels On Buttons And Links

To change the text labels on either buttons or links, we’ll use the locale prop. The locale prop has two objects, last and skip. We specified our last tour as the End tour, while skip is the Close tour.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} locale={{ last: "End tour", skip: "Close tour" }} /> </> );};

Customize Styles, Like Button Colors And Text Alignment

The default color of buttons is red, and text alignment is always set right. Let’s apply some custom styles to change button colors and align text properly.

We see in our code that the styles prop is an object. It has other objects with unique values, including:

tooltipContainer
Its key is textAlign, and its value is left.
buttonNext
Its key is backgroundColor, and its value is green.
buttonBack
Its key is marginRight, and its value is 10px.
locale
Its keys are last and skip, and its values are End Tour and Close Tour, respectively.

const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left" }, buttonNext: { backgroundColor: "green" }, buttonBack: { marginRight: 10 } }} locale={{ last: "End tour", skip: "Close tour" }} /> </> );};

The library exposes some props to use on our elements in place of the default elements, some of which are:

A Practical Guide To Product Tours In React Apps — Smashing Magazine (9)

useReducer

We’ve seen how to create a product tour and how to customize it using the various props of Joyride.

The problem with props, however, is that, as your web app scales and you need more tours, you don’t just want to add steps and pass props to them. You want to be able to automate the process by ensuring that the process of managing tours is controlled by functions, and not merely props. Therefore, we’ll use useReducer to revamp the process of building tours.

In this segment, we are going to take control of the tour by using actions and events, made available by the library through a callback function.

To make this process feel less daunting, we’ll break this down into steps, enabling us to build the tour in chunks.

The complete source code is available, but I’d advise you to follow this guide, to understand how it works. All of our steps will be done in the Tour.js file in the components folder.

Define the Steps

import React from "react";import JoyRide from "react-joyride";const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour’s logo.", }, { target: ".tour-cart", content: "View the cart you’ve added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", },];

In this first step, we define our steps by targeting the appropriate classNames and setting our content (text).

(Video) State of the Web in South-East Asia, with Chen Hui Jing, Eka Jayani Ayuningtyas, and Sophia Lucero.

Define the Initial State

 const INITIAL_STATE = { run: false, continuous: true, loading: false, stepIndex: 0, // Make the component controlled steps: TOUR_STEPS, key: new Date(), // This field makes the tour to re-render when the tour is restarted};

In this step, we define some important states, including:

Set the run field to false, to ensure that the tour doesn’t start automatically.
Set the continuous prop to true, because we want to show the button.
stepIndex is the index number, which is set to 0.
The steps field is set to the TOUR_STEPS that we declared in step 1.
The key field makes the tour re-render when the tour is restarted.

Manage The State With Reducer

 const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { // start the tour case "START": return { ...state, run: true }; // Reset to 0th step case "RESET": return { ...state, stepIndex: 0 }; // Stop the tour case "STOP": return { ...state, run: false }; // Update the steps for next / back button click case "NEXT_OR_PREV": return { ...state, ...action.payload }; // Restart the tour - reset go to 1st step, restart create new tour case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date() }; default: return state; }};

In this step, using a switch statement when case is START, we return the state and set the run field to true. Also, when case is RESET, we return the state and set stepIndex to 0. Next, when case is STOP, we set the run field to false, which will stop the tour. Lastly, when case is RESET, we restart the tour and create a new tour.

According to the events (start, stop, and reset), we’ve dispatched the proper state to manage the tour.

Listen to the Callback Changes and Dispatch State Changes

 import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride";const callback = data => { const { action, index, type, status } = data; if (action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) } }); }};

Using the exposed EVENTS, ACTIONS, and STATUS labels offered by React Joyride, we listen to the click events and then perform some conditional operations.

In this step, when the close or skip button is clicked, we close the tour. Otherwise, if the next or back button is clicked, we check whether the target element is active on the page. If the target element is active, then we go to that step. Otherwise, we find the next-step target and iterate.

Autostart the Tour With useEffect

useEffect(() => { if(!localStorage.getItem("tour"){ dispatch({ type: "START"}); }}, []);

In this step, the tour is auto-started when the page loads or when the component is mounted, using the useEffect hook.

Trigger The Start Button

const startTour = () => { dispatch({ type: "RESTART" });};

The function in this last step starts the tour when the start button is clicked, just in case the user wishes to view the tour again. Right now, our app is set up so that the tour will be shown every time the user refreshes the page.

Here’s the final code for the tour functionality in Tour.js:

import React, { useReducer, useEffect } from "react";import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride";// Define the stepsconst TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour’s logo.", disableBeacon: true, }, { target: ".tour-cart", content: "View the cart you’ve added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", },];// Define our stateconst INITIAL_STATE = { key: new Date(), run: false, continuous: true, loading: false, stepIndex: 0, steps: TOUR_STEPS,};// Set up the reducer functionconst reducer = (state = INITIAL_STATE, action) => { switch (action.type) { case "START": return { ...state, run: true }; case "RESET": return { ...state, stepIndex: 0 }; case "STOP": return { ...state, run: false }; case "NEXT_OR_PREV": return { ...state, ...action.payload }; case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date(), }; default: return state; }};// Define the Tour componentconst Tour = () => { const [tourState, dispatch] = useReducer(reducer, INITIAL_STATE); useEffect(() => { if (!localStorage.getItem("tour")) { dispatch({ type: "START" }); } }, []); const callback = (data) => { const { action, index, type, status } = data; if ( action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) }, }); } }; const startTour = () => { dispatch({ type: "RESTART" }); }; return ( <> <button className="btn btn-primary" onClick={startTour}> Start Tour </button> <JoyRide {...tourState} callback={callback} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, }} locale={{ last: "End tour", }} /> </> );};export default Tour;

Conclusion

We’ve seen how to build a product tour in a web UI with React. We’ve also covered some guidelines for making product tours effective.

Now, you can experiment with the React Joyride library and come up with something awesome in your next web app. I would love to hear your views in the comments section below.

Resources

Documentation, React Joyride
“Seven Exceptional Product Tours, and the Best Practices They Teach Us”, Morgan Brown, Telepathy
“The Ultimate Guide to Product Tours and Walkthroughs”, Margaret Kelsey, Appcues

(ks, ra, al, yk, il)

Explore more on

(Video) A JAMstack for the Readability Guidelines project by Rich Higgins

FAQs

How do you use react Joyride? ›

Install React Joyride in your terminal by typing the following command.

npm install react-joyride.
import ReactJoyride from 'react-joyride';
class App extends React.Component { constructor() { super(); this.state={ steps: [ { ...
render () { return ( <div className="app"> <ReactJoyride. steps={this.state.steps}

Jun 9, 2019

What is a product tour? ›

A product tour is a guided walkthrough of a product or service, typically presented to users after they sign up or first log in. Product tours are used to onboard new users, introduce them to a product's key features and value, and help them get started using it.

What are the 4 C's of effective onboarding? ›

The four Cs are Compliance, Clarification, Connection, and Culture.

Explore More ›

What is the best practice in React? ›

React Best Practices

Maintain Clear Folder Structure.
Institute a Structured Import Order.
Adhere To Naming Conventions.
Use a Linter.
Employ Snippet Libraries.
Combine CSS and JavaScript.
Limit Component Creation.
Implement Lazy Loading.

More items...

Mar 28, 2023

Show Me More ›

Is react Joyride free? ›

React Joyride is an open-source library, and it's completely free of charge.

Discover More Details ›

What platform is Joyride on? ›

Joyride, a comedy drama movie starring Olivia Colman, Charlie Reid, and Lochlann O'Mearáin is available to stream now. Watch it on Hulu, Redbox., Prime Video, Vudu or Apple TV on your Roku device.

How do you use pros in react? ›

Using Props in React

Firstly, define an attribute and its value(data)
Then pass it to child component(s) by using Props.
Finally, render the Props Data.

Know More ›

How do you create a product walkthrough? ›

To create effective product walkthroughs, you need to decide on your product's aha moment and funnel your new users toward it. To measure the effectiveness of your product walkthroughs, add custom events and track their completion. You can also trigger an in-app survey once users complete your walkthroughs.

Learn More ›

Can you build native apps with React? ›

As a result, React has become massively popular among developers worldwide. It supports the responsive layout for all modern devices, including smartphones, laptops, and desktops. Therefore, you can create your mobile app using React JS.

Get More Info Here ›

How do I set React app to production? ›

How to create a Production build production for your React app?

Step 1: Firstly, let us start: create a new React application.
Step 2: Then navigate to the project folder.
Step 3: Now, let us customize our app by editing the default code. ...
Step 4: Run the application (development mode).

More items...

Feb 25, 2022

Tell Me More ›

How do I create a react native UI? ›

Creating an Android native UI component

Create the ViewManager subclass.
Implement the createViewInstance method.
Expose view property setters using @ReactProp (or @ReactPropGroup ) annotation. ...
Register the manager in createViewManagers of the applications package.
Implement the JavaScript module.

Nov 19, 2021

Explore More ›

What are the 4 pillars of the onboarding margin framework? ›

The Onboarding Margin requires success with program content along four key pillars: Cultural Mastery; Interpersonal Network Development; Early Career Support; and Strategy Immersion and Direction. The last two of these serve as the power pillars – i.e., they have the opportunity to drive the greatest impact.

View Details ›

What are the three levels of onboarding? ›

There are three levels, the SHRM says.

Level 1 — passive onboarding. Compliance is a natural part of formal onboarding, and some role clarification may be given. ...
Level 2 — high potential onboarding. ...
Level 3 — proactive onboarding.

Jun 10, 2021

Explore More ›

What are the top three keys to a successful onboarding program? ›

There are three keys to a successful strategic onboarding program: people, culture, and milestones and tasks. A consistent, and repeatable onboarding process requires few adjustments and benefits all stakeholders involved. Plus, you're more prepared to set your new hire up for long-term success.

Explore More ›

Which API language is best for React? ›

We recommend using Express Js with NodeJS as they have proven to be the best and most appropriate backend framework for React.

Learn More Now ›

Is React hard to master? ›

Thankfully, React is easy to learn, but only once you have foundational knowledge in JavaScript. Of course, the difficulty that comes with learning anything new is somewhat subjective. Regardless of your prior experience, plenty of resources are available to help make React easier to learn.

Should I use React 2023? ›

Learning React in 2023 is a smart investment for developers looking to stay ahead of the curve in the tech industry. With its wide range of benefits, React is a versatile and powerful technology that can help developers achieve their goals.

View Details ›

How much is React paid? ›

The average React developer salary in India is ₹557,208/yr. On the other hand, the average salary for Angular developers is ₹596,391/yr. How does a React developer salary vary with experience?

How much does a React app cost? ›

Medium-sized React web app

A more complex web app with additional features such as user authentication, e-commerce functionality, and real-time data updates could cost between $20,000 and $70,000.

Learn More ›

How much is to learn before React? ›

Do I Need to Master JavaScript Before React? You do not need to master “all” JavaScript before moving to React. But, you need to have a solid grasp of the language. If you aim to become a web developer, you should understand Javascript, especially since it's the most popular programming language in this century.

Keep Reading ›

What does JoyRide do? ›

Meaning of joyride in English. an occasion when someone drives fast and dangerously for pleasure, especially in a stolen vehicle: He took his grandmother's car for a joyride.

Is JoyRide available 24 hours? ›

Operating 24/7, JoyRide covers cities across Metro Manila, Rizal, Bulacan, Cavite, Laguna, Baguio, Metro Cebu, and more!

View Details ›

What is JoyRide real name? ›

Jon Ford, (born 24 July 1985) better known by his stage name Joyryde (stylised as JOYRYDE), is an English DJ and producer, son of John Ford (also known as John Phantasm and owner of Phantasm Records).

Get More Info Here ›

How long does it take to become a pro in React? ›

If you are a beginner or already have some programming experience, it will take you one to four weeks to completely master the basics.

Learn More Now ›

When should I use props in React? ›

Props are used to store data that can be accessed by the children of a React component. They are part of the concept of reusability. Props take the place of class attributes and allow you to create consistent interfaces across the component hierarchy.

Discover More ›

What are hooks in React? ›

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects. React provides a bunch of standard in-built hooks: useState : To manage states. Returns a stateful value and an updater function to update it.

Get More Info Here ›

What are the 5 steps of product? ›

The product life cycle is the progression of a product through 5 distinct stages—development, introduction, growth, maturity, and decline. The concept was developed by German economist Theodore Levitt, who published his Product Life Cycle model in the Harvard Business Review in 1965.

What are the 6 steps used in product planning? ›

Product development process: The 6 stages (with examples)

Idea generation (Ideation)
Product definition.
Prototyping.
Initial design.
Validation and testing.
Commercialization.

Nov 1, 2022

Get More Info ›

What is the difference between product tour and demo? ›

Interactive product demos or tours provide prospects and customers with a hands-on walk-through experience of your product throughout the sales and marketing funnel. Unlike product walk-throughs, interactive product tours are sharable replicas of your product (not the product itself).

Get More Info ›

How effective are product tours? ›

The average completion rate for a Product Tour is 61%

Product Tours won't be as effective if users don't engage all the way through to the end. We found that just under two thirds of users complete Tours they start, but this number can vary drastically. It all depends on the Tour's design, length, and context.

Get More Info ›

What is the purpose of product tour? ›

Product tours are in-app tutorials that guide new users through an app, website, or SaaS tool's user interface (UI) and key features. Also known as product walkthroughs, they help companies simplify their user onboarding process.

Learn More ›

What is walkthrough technique? ›

The walkthrough method establishes a foundational corpus of data upon which can be built a more detailed analysis of an app's intended purpose, embedded cultural meanings and implied ideal users and uses.

See Details ›

What are the types of walkthrough? ›

Types of Walkthroughs

Specification walkthroughs. System specification. Project planning. Requirements analysis.
Design walkthroughs. Preliminary design. Design.
Code walkthroughs.
Test walkthroughs. Test plan. Test procedure.
Maintenance reviews.

What do you do before deploying React app? ›

Before you deploy, make sure your project is stored in a GitHub repository, and then move on to creating an account on Render. Next, click New Static Site on the dashboard. If this is your first time using Render, you'll need to connect your GitHub or GitLab, wherever your repository is stored.

How do I make my onboarding more interactive? ›

One way to simplify things is to break down tasks into distinct stages and use multiple checklists to drive users forward. Key tactic #4: Use gamification to make the onboarding process more interactive and fun. Progress bars, checklists, and fun animations are all effective ways to drive engagement.

Get More Info ›

What is the 4 step onboarding process? ›

Phase 1: Pre-Onboarding. Phase 2: Welcoming New Hires. Phase 3: Job-Specific Training. Phase 4: Ease of Transition to the New Hire's New Role.

Explore More ›

What are the two types of onboarding? ›

What are the five types of onboarding?

Operational Onboarding. At its most basic level, onboarding is about providing the tools and equipment that the employee will need to carry out their job. ...
Knowledge Onboarding. ...
Performance Onboarding. ...
Social Onboarding. ...
Talent Onboarding. ...
What onboarding are people currently doing.

Get More Info ›

What is the difference between virtual onboarding and onboarding? ›

Virtual Onboarding vs Traditional Onboarding

You can still introduce new hires to your company culture, guide them through the technology, hold one-on-one meetings, and assign an onboarding buddy as you do during the traditional onboarding process — the difference is that all these activities are performed online.

Read On ›

What are the 5 C's of effective onboarding? ›

These have since evolved into the 5 “C's” of Onboarding: Compliance, Clarification, Confidence, Connection, and Culture.

Show Me More ›

Is onboarding a stressful job? ›

Our survey found that out of the 1,000 full-time employees we questioned, nearly two thirds (63%) were left feeling stressed or overwhelmed by their onboarding experience. This is a very worrying statistic.

Know More ›

What does a good onboarding look like? ›

The five Cs of employee onboarding can make new hires feel welcome, valued and comfortable at their new jobs. These include compliance, clarification, confidence, connection and culture. Companies that incorporate them tend to enjoy greater onboarding success than those that do not.

Videos

1. Agile Development and Lean Transformation, a Practical Guide

(John Cooper)

2. PIHU IS MAD 🤪 PIHOOZZ

(Pihoozz)

3. Family takes photo wife files for divorce after seeing this detail

(Trending Story)

4. Supercharge your product's user experience with psychology Joe Leech Smashing Conf San Fransisco

(MrJoe: Coach to CEOs)

5. Stewie: she’s a fraud

(osuxc)

6. Manual drivers when they get in an automatic

(Chrys Gaines)

A Practical Guide To Product Tours In React Apps — Smashing Magazine (2023)

About The Author

Email Newsletter

Product Tour Guidelines

Never Lecture

Break It Down

Add Value

React Tour

How It Works

Pros

Cons

React Joyride

How It Works

Pros

Cons

Why React Joyride?

Building A Simple Product Tour

Define The Tour’s Steps

Enable Skip Option in Each Step

Change Text Labels On Buttons And Links

Customize Styles, Like Button Colors And Text Alignment

useReducer

Define the Steps

Define the Initial State

Manage The State With Reducer

Listen to the Callback Changes and Dispatch State Changes

Autostart the Tour With useEffect

Trigger The Start Button

Conclusion

Resources

FAQs

How do you use react Joyride? ›

How do I create a react native UI? ›

What does JoyRide do? ›

What is the purpose of product tour? ›

What do you do before deploying React app? ›

How do I make my onboarding more interactive? ›

Videos

References