how to use react joyride in multiple pages - reactjs

Question

Is there a way of creating a react-joyride tour in multiple pages.so my index.js file looks like below? I added react-joyride in index page because all components run through the index.js file.
class IndexApp extends Component {
constructor(props) {
super(props);
this.state = {
view: false,
run: true,
steps: [
{
target: '.cc',
content: 'This is my awesome feature!',
},
],
stepIndex: 0
};
}
handleJoyrideCallback = data => {
const { action, index, status, type } = data;
console.log("ghgg")
if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
// Update state to advance the tour
this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
}
else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
// Need to set our running state to false, so we can restart if we click start again.
this.setState({ run: false });
}
console.groupCollapsed(type);
console.log(data); //eslint-disable-line no-console
console.groupEnd();
};
componentDidCatch(error, errorInfo) {
this.setState({ error });
unregister();
}
render() {
const { view,run, stepIndex, steps } = this.state;
if (view) {
return( <div>
{this.props.children}
<Joyride
callback={this.handleJoyrideCallback}
run={run}
stepIndex={stepIndex}
steps={steps}
/>
</div>);
} else {
return null;
}
}
}

Answer 1

You can use globalState for this, then create a hook on all pages.
For global state : https://endertech.com/blog/using-reacts-context-api-for-global-state-management
https://github.com/gilbarbara/react-joyride/discussions/756
const initialState = {
tour: {
run: false,
steps: []
}
}