Control the tour in other component

[philippenunes]

I have a separate component which has the tour steps list. I would like the following behavior: the user chooses one of the options (steps) and the tooltip would open exactly in that part of the tour, without using the beacon. Is it possible to implement this behavior?

[gilbarbara]

Hey @philippenunes

You can set up a controlled tour using the stepIndex prop and use the disableBeacon prop in every step.

You'll need to update the stepIndex yourself in the callback.

import { CallBackProps, EVENTS, STATUS } from 'react-joyride';

const handleJoyrideCallback = (data: CallBackProps) => {
  const { action, index, status, type } = data;

  if (([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)) {
    // Need to set our running state to false, so we can restart if we click start again.
    setState({ run: false, stepIndex: 0 });
  } else if (([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND] as string[]).includes(type)) {
    const nextStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);

    // Update state to advance the tour
    setState({
      stepIndex: nextStepIndex,
    });
  }
};

Check the Controlled example for more information.