I am making a react-joyride
tutorial for my create-react-app
.
My goal is to build a tutorial to start and stop periodically, as the user progresses through the site. This means the tutorial will turn on and off with certain user behavior (changing pages, launching a new module, etc)
Issue: How to integrate: steps <> Joyride <> component state across multiple pages and components?
I considered (4) different approaches:
- Having one single master 'steps' JSON that is loaded and managed in context and passed down to pages
- Having multiple individual 'steps' JSON files in each page and component.
- Having one single
<Joyride />
component at a global level that receives a single JSON 'steps' file - Having multiple
<Joyride />
components on each page / component with a local 'steps' files
I've tried all four approaches, but still not able to make joyride work fluidly across multiple pages.
Any ideas/suggestions appreciated!