Dynamically set steps when used in a context

[iamdevlinph]

We're planning on using Joyride in a context so we can just sort of do a startRun(steps) on where we want it to start. But it's not possible since the steps are already defined when the context is loaded. Is there a way to achieve this?

export const JoyrideProvider = ({ children }) => {
  const [run, setRun] = useState(false);
  const [steps, setSteps] = useState<Step[]>([]);
  const [stepIndex, setStepIndex] = useState(0);

  const joyrideContextAPI: JoyrideContext = {
    startRun: (passedSteps) => {
      setSteps(passedSteps);
      setRun(true);
    },
    endRun: () => {
      setRun(false);
    },
    stepIndex,
    setStepIndex,
  };

  return (
    <JoyrideContext.Provider value={joyrideContextAPI}>
      <Joyride
        run={run}
        steps={steps}
        stepIndex={stepIndex}
        continuous={true}
        showProgress={true}
        debug
      />
      {children}
    </JoyrideContext.Provider>
  );
};

[reergymerej]

Pretty quiet here. 🤔

I've had some success with this, but changing the steps dynamically may disrupt the lifecycle of the popover. Namely, changing the step won't update the positioning of the tooltip.