Guided Tour / Joyride Integration To My Website

I want to add a joyride or guided tour for my React App. I want to show it when the users first uses it and disable for subsequent frequent visits. I have found this library https:

Solution 1:

Yes adding it to localStorage is a good solution. I use the following function for this to trigger the check:

checkForInitialTour() {
  if (!localStorage.getItem('tourDone')) {
    localStorage.setItem('tourDone', true);
    this.joyride.reset();
    this.joyride.start(true);
  }
}

Also possible to set in localstorage after tour by using the callback parameter

callback={(e) => { if (e.type === 'finished') { window.scrollTo(0, 0); localStorage.setItem('tourDone', true); } }}

Solution 2:

If you're using nextjs or server-side rendering, here's my approach:

State is initialized:

runJoyride: (typeofwindow === 'undefined')? false : window.localStorage.getItem('onboarded') === null,

And you callback:

handleJoyrideCallback = data => {
    const { action, index, status, type } = data;

    if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      this.setState({ runJoyride: false });
      window.localStorage.setItem('onboarded', true);
    }
  };