Best way to hide / defer tour for elements not onscreen?

[schvenk]

I have an app with multiple screens and sub-screens (via React Router but also just via other conditional logic) and would like to show tour steps only when their associated component / DOM element is onscreen. Like, if step 3 is connected to <div data=tour="Something"> then I'd like to be able to open the tour and simply have it not show if that div isn't present.

I can think of various ways to wrap Reactour to make that happen but wondered if there's a best practice here. Thanks!

[elrumordelaluz]

did you tried any of the sandboxes, specially those using react-router?

[schvenk]

I did, but they seem to assume that the user will take some action to open the tour, and I was looking to be a little more automated about it. What I've ended up doing (for other reasons as well) is wrapping TourProvider in a custom context provider with its own openTour() function, which simply looks for whether the appropriate element is in the DOM before calling the underlying setIsOpen() function.

[elrumordelaluz]

cool! In case you have a minute, should be super useful if you can create a sandbox showing your use-case and adding it to the docs. thanks again

[sehgxl]

Faced this issue and a sort a similar one as well. Sometimes after a currentStep gets completed, elements change position or appear in the DOM if they were not present before. Due to this the focused area is not accurate sometimes.

Solved it with a context which introduces one more controlledStep state.

Roughly the code looks like this:

  const [controlledStep, setControlledStep] = useState(0);
  const { setCurrentStep} = useTour();

  useEffect(() => {
    if (controlledStep === 1) {
      // Do something which changes position of elements/brings them into DOM
      
      setTimeout(() => {
        setCurrentStep(controlledStep);
      }, 300); // 300ms is a rough durtion figured out by hit and trial
      return;
    }

  }, [controlledStep]);