FormidableLabs / spectacle

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.
https://commerce.nearform.com/open-source/spectacle/
MIT License
9.75k stars 691 forks source link

Question: Accessing skipTo method #1245

Closed drewpotter closed 1 year ago

drewpotter commented 1 year ago

Question

I would like to ask about accessing this skipTo method:

skipTo(options: { slideIndex: number; stepIndex: number }): void;

I am hoping to programmatically skipTo slides and also steps within a slide if possible, within a functional React JavaScript component I am using which contains spectacle as a sub-component.

Background Info/Attempts

I have tried modifying the spectacle code to allow me to do this, but I wanted to find the most elegant way of achieving this.

drewpotter commented 1 year ago

I have solved my issue simply by using the BroadcastChannel mechanism. For example, to jump to particular slide fragments at random every 2.5 seconds, I have done this:

  const channel = new BroadcastChannel("spectacle_presenter_bus");

  useEffect(() => {
    const intervalId = setInterval(() => {

      var randomNumber = Math.floor(Math.random() * (4 - 0 + 1) + 1)
      console.log("random: " + randomNumber);

      channel.postMessage(JSON.stringify({
        type: "SYNC",
        payload: {
          slideIndex: 4,
          stepIndex: randomNumber
        }
      }));
    }, 2500);

    return () => clearInterval(intervalId); //This is important
  }), []