use react-joyride in multiple child component

Question

I want to use react-joyride in my application but there is a problem. I have breakdown my component into Navbar and SideNavigation. They are separate child component. Now that I want to use react-joyride in both first in SideNavigation and then the last step be in Navbar. How can I do it so?

Here is my code

class AgentDashboard extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      roles: [],
      joyrideOverlay: true,
      joyrideType: "continuous",
      isReady: false,
      isRunning: false,
      stepIndex: 0,
      steps: [],
      selector: ""
    };
  }
  componentDidMount() {
  this.setState({
      isReady: true,
      isRunning: true,
    });
  }


  addSteps(steps) {
    let newSteps = steps;
    if (!Array.isArray(newSteps)) {
      newSteps = [newSteps];
    }

    if (!newSteps.length) {
      return;
    }

    this.setState(currentState => {
      currentState.steps = currentState.steps.concat(newSteps);
      return currentState;
    });
  }

  callback(data) {
    this.setState({
      selector: data.type === "tooltip:before" ? data.step.selector : ""
    });
  }

  next() {
    this.joyride.next();
  }

  render() {
    const {
      isReady,
      isRunning,
      joyrideOverlay,
      joyrideType,
      selector,
      stepIndex,
      steps
    } = this.state;
    let html;
    if (isReady) {
      html = (
        <div>
          <Joyride
            ref={c => (this.joyride = c)}
            callback={data => this.callback(data)}
            debug={false}
            disableOverlay={selector === ".card-tickets"}
            locale={{
              back: <span>Back</span>,
              close: <span>Close</span>,
              last: <span>Last</span>,
              next: <span>Next</span>,
              skip: <span>Skip</span>
            }}
            run={isRunning}
            showOverlay={joyrideOverlay}
            showSkipButton={true}
            showStepsProgress={true}
            stepIndex={stepIndex}
            steps={steps}
            type={joyrideType}
          />
          <TopNavigation
            username={this.state.username ? this.state.username : ""}
            }
            roles={this.state.roles}
          />
          <main className="imp">
            <SideNavigation
              currentNav={this.props.location.pathname.substring(1)}
              addSteps={steps => this.addSteps(steps)}
              selector={selector}
              next={() => this.next()}
            />
          </main>
        </div>
      );
    }
    return (
      <div>
        {html}
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AgentDashboard);

SideNavigation.js

const sideMenus = [
  {
    menu: "My Property",
    link: "imp/dashboard/my-properties",
    icon: "icon-hotel",
    class: "hotel-selector"
  },
  {
    menu: "My IMP",
    link: "imp/dashboard/my-imps",
    icon: "icon-people-outline",
    class: "imp-selector"
  },
];

class SideNavigation extends React.PureComponent {
  componentDidMount() {
    const steps = [
      {
        title: "Trigger Action",
        text: "It can be click",
        selector: ".imp-dashboard",
        position: "right",
        type: "hover",
      },
      {
        title: "Advance customization",
        text:
          "You can set individual styling options for beacons and tooltips.",
        selector: ".hotel-selector",
        position: "bottom",
        allowClicksThruHole: true,
        style: {
          backgroundColor: "#ccc",
          mainColor: "#000",
          header: {
            color: "#f04",
            fontSize: "3rem",
            textAlign: "center"
          },
          footer: {
            display: "none"
          },
          beacon: {
            inner: "#000",
            outer: "#000"
          }
        }
      }
    ];
    this.props.addSteps(steps);
  }

  handleClick = e => {
    e.preventDefault();
    const { next } = this.props;
    next();
  };

  render() {
    const { currentNav, selector } = this.props;
    const menuToShow = sideMenus.map(menuItem =>
      <Menu.Item key={menuItem.link} className={menuItem.class}>
        <NavLink
          activeClassName={currentNav.includes(menuItem.link) ? "active" : ""}
          to={`/${menuItem.link}`}
        >
          <i className={menuItem.icon} />
          <span>
            {menuItem.menu}
          </span>
        </NavLink>
      </Menu.Item>
    );
    return (
      <Sidebar.Pushable>
        <Sidebar
          as={Menu}
          width="thin"
          visible
          icon="labeled"
          vertical
          inverted
        >
          <Menu.Item name="dashboard" className="imp-dashboard">
            <NavLink
              activeClassName={currentNav === "imp/dashboard" ? "active" : ""}
              to="/imp/dashboard"
            >
              <i className="icon-activity" />
              <span>Dashboard</span>
            </NavLink>
          </Menu.Item>
          {menuToShow}
        </Sidebar>
        <Sidebar.Pusher>
          <Routes />
        </Sidebar.Pusher>
      </Sidebar.Pushable>
    );
  }
}

Do you think it is possible to use react-joyride with these kind of component breakdown/structure? I am totally blank on how can I use it. Can anyone guide me, please? I managed to write the above code where I don't get any error nor I see any intro part working when button is clicked. Have i missed anything?

Here is the code in gist for better readability

https://gist.github.com/anonymous/bc0121ab23652513c2639a0aa55c4390

Answer 1

Yes, it is possible with this kind if component breakdown(Top and side navigation). The important thing is properly configuring the "arrayOfSteps" for joyride. Importantly, to configure the "selector" property of steps in joyride component.

For example, the array of steps can travel through top and side navigation tags. Something like:

   {
  title: 'First Step',
  text: 'Start using the <strong>joyride</strong>',
  selector: '#first-top_menu',
  position: 'bottom-left',
  type: 'hover',
  isFixed: true,
  // optional styling
  style:{
   .....
    }
},
{
  title: 'Second Step',
  text: 'Start using the <strong>joyride</strong>',
  selector: '#second-top_menu',
  position: 'bottom-left',
  type: 'hover',
  isFixed: true,
  // optional styling
  style:{
   .....
    }
},
{
  title: 'Third Step',
  text: 'Start using the <strong>joyride</strong>',
  selector: '#first-side_menu',
  position: 'bottom-left',
  type: 'hover',
  isFixed: true,
  // optional styling
  style:{
   .....
    }
},