Programmically continue tour

[canberkakartuna]

I like to continue the tour programmatically. Suppose that, I have 4 features and I like to demonstrate these features to users. However, anytime I demonstrate a feature, I want to stop the tour and wait user complete this feature, as soon as he/she complete it, I like to continue the tour. I noticed that there is run and stepIndex props. However, after I set these props programmatically, lifecycle property cannot go beyond init. Thank for any help in advance.

import React, { useState, forwardRef, useImperativeHandle } from 'react';
import Joyride, { ACTIONS, EVENTS, STATUS } from 'react-joyride';

const Tour = ({ steps }, ref) => {
  const [step, setStep] = useState({
    index: 0,
    isRunning: true,
  });

  useImperativeHandle(ref, () => ({
    setStep,
  }));

  const handleJoyrideCallback = (data) => {
    const { action, index, status, type } = data;
    console.log('handleJoyrideCallback', data);
    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      const newIndex = index + (action === ACTIONS.PREV ? -1 : 1);
      setStep((prev) => ({ ...prev, index: newIndex }));
    } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      setStep((prev) => ({ ...prev, isRunning: false }));
    }
  };

  return (
    <Joyride
      callback={handleJoyrideCallback}
      steps={steps}
      stepIndex={step.index}
      run={step.isRunning}
      continuous={true}
      scrollOffset={150}
      floaterProps={{
        hideArrow: true,
      }}
    />
  );
};

export default forwardRef(Tour);

[dcworldwide]

Did you find a solution?