useJoyride hook

[warent]

I know this has been mentioned before but my recommendation is different.

What I would like to see is everything needed to control the component wrapped in a hook so that I can hook into the joyride state.

For example:

import { useEffect } from "react";
import Joyride, { useJoyride } from "react-joyride";

const MyComponent = () => {

  const joyride = useJoyride();
  useEffect(() => {
    console.log("New step index", joyride.stepIndex)
  }, [ joyride.stepIndex ]);
  
  return (
    <Joyride
      ...joyride
      steps={[
        {
          target: "body",
          placement: "center",
          content: "hello world"
        }
      ]}
    />
  );
}

In order to do something as simple as hooking into a step change, as far as I can tell right now I have to completely override and reimplement controlling the component which is very painful.