To see this working, head to your live site.

how to use react joyride in multiple pages

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 tourthis.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-consoleconsole.groupEnd();
  };

1 comment

Answers (1)

AnswerDeveloper

Mar 09

Yes, you can create a react-joyride tour in multiple pages by passing the steps array as a prop to the component that needs the tour. You can define the steps array in a separate file and import it in the components where you want to use the tour.

For example, let's say you have two components, ComponentA and ComponentB, and you want to use the react-joyride tour in both of them. You can create a tourSteps.js file with the following content:


const tourSteps = [
  {
    target: '.cc',
    content: 'This is my awesome feature in Component A!',
  },
  {
    target: '.dd',
    content: 'This is my awesome feature in Component B!',
  },
];

export default tourSteps;

Then, in ComponentA and ComponentB, you can import the tourSteps array and pass it as a prop to the Joyride component:


import React, { Component } from 'react';
import Joyride from 'react-joyride';
import tourSteps from './tourSteps';

class ComponentA extends Component {
  render() {
    return (
      <div className="cc"><h1>Welcome to Component A</h1><Joyridesteps={tourSteps}run={true}continuous={true}showProgress={true}callback={this.handleJoyrideCallback}stepIndex={this.state.stepIndex}
        /></div>
    );
  }
}

class ComponentB extends Component {
  render() {
    return (
      <div className="dd"><h1>Welcome to Component B</h1><Joyridesteps={tourSteps}run={true}continuous={true}showProgress={true}callback={this.handleJoyrideCallback}stepIndex={this.state.stepIndex}
        /></div>
    );
  }
}

Note that in both components, you are passing the same tourSteps array to the Joyride component. This way, the tour will have the same steps in both components.

You can also customize the steps for each component by creating a separate steps array for each component and passing it as a prop to the Joyride component.