Guided Tour / Joyride Integration to my Website

Question

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://github.com/gilbarbara/react-joyride but couldn't figure out how to disable on subsequent visits by same user? Can I use localstorage or cookies to deal with this issue? How?

Answer 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); } }}

Answer 2

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

State is initialized:

runJoyride: (typeof window === '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);
    }
  };