Add Rive support as an integration

[lancesnider]

We want to be able to easily add animated and interactive elements to our docs.

It's currently possible like this, but there ends up being a bit of repeat code for the different components.

// rive-init.js
// This gets put in the root directory and gets called whether the page has a rive element or not
(function() {
  const script = document.createElement("script");
  script.src = "https://unpkg.com/@rive-app/[email protected]/rive.js";
  script.onload = () => {
    console.log('rive loaded')
    window.dispatchEvent(new Event("rive-loaded"));
  };
  document.head.appendChild(script);
})();

// snippets/rive-player.jsx
import { useEffect } from "react";

export const RivePlayer = ({
  src,
  stateMachines = "State Machine 1",
  canvasId = "rive-canvas"
}) => {
  const initRive = () => {
    const rive = window.rive;

    const r = new rive.Rive({
      src: src,
      stateMachines: stateMachines,
      canvas: document.getElementById(canvasId),
      autoplay: true,
      Layout: new rive.Layout({
        fit: rive.Fit.Layout,
      }),
      onLoad: () => {
        r.resizeDrawingSurfaceToCanvas();
      }
    })
  }

  useEffect(() => {
    if (window.rive) {
      initRive()
      return;
    }

    // Otherwise, wait for script load
    const checkRive = () => {
      if (window.rive) {
      initRive()
        window.removeEventListener("rive-loaded", checkRive);
      }
    };

    // You can dispatch your own event from the global loader
    window.addEventListener("rive-loaded", checkRive);

    return () => {
      window.removeEventListener("rive-loaded", checkRive);
    };
  }, []);

  return <canvas id={canvasId} style={{ width: "100%", height: "100%"}} />;
};

usage:

import { RivePlayer } from '/snippets/rive-player.jsx'


<RivePlayer src=""/assets/rivs/my-rive-file.riv" stateMachines="State Machine 1"  canvasId="unique-id" />