CODEWITHSUNDEEP
reactjsnext.js
hmd.fullstack
hmd.fullstack

Reputation: 568

How to to be displayed reactour just first time in nextjs?

I'm using reactour in next.js

I want to just first time when page is rendered reactor to be displayed, and when route change and come back to this page reactor not to be displayed how can do this?

this is how I call it

import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
import dynamic from "next/dynamic";
const Tour = dynamic(() => import("reactour"), { ssr: false });

const tourConfig = [
  {
    selector: ".step_1",
    content:
      'Click "View future forecast earning" to look at all....',
  },
  {
    selector: ".step_2",
    content:
      "Chose different earning forecasts to see how your property...",
  },
];


export default function MyPage(props) {
  const disableBody = target => disableBodyScroll(target);
  const enableBody = target => enableBodyScroll(target);
  const [isTourOpen, setIsTourOpen] = useState(false);
  const closeTour = () => setIsTourOpen(false);

useEffect(() => {
    const timing = setTimeout(() => {
      setIsTourOpen(true);
    }, 2000);
    return () => {
      clearTimeout(timing);
    };
  }, []);

  return (
    <>
      <OtherComponent />
      <Tour
        onRequestClose={closeTour}
        steps={tourConfig}
        isOpen={isTourOpen}
        rounded={5}
        onAfterOpen={disableBody}
        onBeforeClose={enableBody}
        className={classes.root}
        disableInteraction
        inViewThreshold={50}
      />
    </>
  );
}

Upvotes: 4

Views: 1027

Answers (2)

Farrukh Ayaz
Farrukh Ayaz

Reputation: 340

This entirely depends on your logic you can do this in 3 ways if you like:

The local storage way:

localStorage.setItem('displayTour', true);

If you're not clearing out the local storage then you can always check your storage whenever the user signs in to check (in useEffect) if the tour is displayed to them or not.

Storing in cookies:

You can always set cookies for the first time the user signs in and check, but this approach has a con, cookies are set in the browser so if the user has already gone through the tour and they sign in from another browser the tour will be rendered again.

Tour Flag from API (Network Request):

This may be the right thing to do if you are not trying to save your network requests. You can always send back a flag from backend e.g is_tour_displyed: false and can always validate whether to show the tour or not.

Note: The localStorage and the cookies may be cleared out anytime, considering if that's not a problem for you. You can always go for the third option.

Upvotes: 4

Javad Ebrahimi
Javad Ebrahimi

Reputation: 209

you can make condition and add a value to localStorage like blow:

localStorage.setItem('playTour', 'true');

and when ever you played the tour at first time you can set this value to false

Upvotes: 1

Related Questions