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