Implement react joyride across multiple pages as a continuos tour

[nenadev21]

Hi! - what would be the best way to make a tour that goes through different pages. e.g. the tour starts at the home page, then it points to one of the options in the navbar menu, next, it asks users to click a button to go to a different page which is a sibling of the home page, etc.
The app is using react-router and redux.
Should I implement the react joyride in each sibling component separately, on the AppRouter, or somewhere else?
thank you!

[gilbarbara]

hey @nenadev21

You should have the Joyride set up in the root component (and probably only renders it if the user never took the tour).
Also, you will need to use a controlled tour, where you update the tour stepIndex (in the callback) when the component that you expect is rendered.
Since this workflow spans multiple components, using redux for it is not a bad idea.

Check the Controlled example in the demo:
https://github.com/gilbarbara/react-joyride-demo/blob/master/src/Controlled/index.tsx
https://react-joyride.com/controlled

[nenadev21]

thank you @gilbarbara. would it be a way to connect two tours and make it look like one whole tour? In my case, I included joyride in the parent component (home) but after two steps I'd like it to jump into a sibling component (one of the pages tied to the navBar). I tried setting a Link to the next button on last step but it didn't work. Any ideas on how to implement something like that? I appreciate your help!

[josetamayo]

hey @nenadev21. I just got started on a multi page tour. Here's what I have so far - and working. This is a simplified explanation that will point you in the right direction.

Create separate step objects for importing into your main component.

import { guidedTourPageOne } from 'joyride/tour-page-one';
import { guided TourPageTwo } from 'joyride/tour-page-two';

joyride/tour-page-one.js

export const = guidedTourPageOne = [
  {
    target: 'body',
    content: 'This is page one!'
  }
] ;

joyride/tour-page-two.js

export const = guidedTourPageTwo = [
  {
    target: 'body',
    content: 'This is page two!'
  }
] ;

In your parent component you can set which steps load based on the route.

const [steps, setSteps] = useState([]);

if (router.pathname === '/page-one') {
  setSteps(guidedTourPageOne);
}
  
if (router.pathname === '/page-two') {
  setSteps(guidedTourPageTwo);
}

 <Joyride
    steps={steps}
 />

[The-Able]

@gilbarbara
Hello. I 'd like to use Joyride through different routing as a continuous tour.
I checked https://react-joyride.com/controlled but it keeps the single page(same url) while the tour.

I want the continuous tour through different pages while the tour.
I hope you understand what I mean.
Thanks.

[gilbarbara]

Hey @The-Able
Check the multi-route example instead.

[The-Able]

These 2 (a, b) routings are children of parent route.
I want to implement completely different routing.

[The-Able]

@gilbarbara
So, can we implement it with the current version of Joyride?

[gilbarbara]

I don't know your requirements so I can't say for sure.
Have you tried?
I didn't understood your comment about child routes, every route under / is a child.

[jonamonti]

Hi @gilbarbara! Hope you're doing great.

I'm trying to implement react-joyride but I'm facing a problem I couldn't solve.
I'm on the MultiRoute use case. Step 0 works fine: on home screen ( /home ) I click a button "Start onboarding", the popup appears, when clicking next the run state goes false, I navigate to the next screen ( /support ), the run state updates to true, the stepIndex updates to 1 ... but the pop up for this step won't appear. Checked that target on step 1 exists on /support.

That is my context

that is my "index"

What you have in "Wrapper", I've put in my initial screen (is that ok?)

And here is my "RouteA" screen. On line 155 is the target for the task.

Please, if you need any other info just let me know.

Thanks in advance and sorry for the lenth of the msg 😅

[gilbarbara]

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.

[jonamonti]

Hi @gilbarbara! Thanks for the suggestion, that solved the issue with your suggestion.

Is there any documentation explaining what happens with the internal state on each event? It's getting a little bit complicated to build the handleCallback logic without what to expect to get from (data) when clicking next, back, close, clicking outside the tooltip, etc.

[gilbarbara]

Cool.

Check the docs for the callback or the type definition file.