@rive-app/react-webgl2 4.8.4

package/dist/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@rive-app/webgl2");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/t(e),i=function(){return i=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},i.apply(this,arguments)};function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)n.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(t[r[i]]=e[r[i]])}return t}function o(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}"function"==typeof SuppressedError&&SuppressedError;var s=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var u=globalThis.ResizeObserver||s,c=void 0!==globalThis.ResizeObserver,l=!c;function f(n,t){void 0===t&&(t=!0);var r=e.useState({width:0,height:0}),i=r[0],a=r[1];e.useEffect(function(){if("undefined"!=typeof window&&t){var e=function(){a({width:window.innerWidth,height:window.innerHeight})};return l&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var o,s,f,d=e.useRef(new u((o=function(e){c&&a({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},s=0,f=0,function(){for(var e=this,n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];clearTimeout(f),f=window.setTimeout(function(){return o.apply(e,n)},s)})));return e.useEffect(function(){var e=d.current;if(t){var r=n.current;return n.current&&c&&e.observe(n.current),function(){e.disconnect(),r&&c&&e.unobserve(r)}}e.disconnect()},[n,d]),i}var d={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function v(e){return Object.assign({},d,e)}function h(n){var t=n.riveLoaded,r=void 0!==t&&t,i=n.canvasRef,a=n.containerRef,s=n.options,u=void 0===s?{}:s,c=n.onCanvasHasResized,l=n.artboardBounds,d=v(u),h=e.useState({height:0,width:0}),p=h[0],w=p.height,R=p.width,y=h[1],g=e.useState({height:0,width:0}),b=g[0],m=b.height,C=b.width,O=g[1],E=e.useState(!0),x=E[0],P=E[1],T=d.fitCanvasToArtboardHeight,L=d.shouldResizeCanvasToContainer,z=d.useDevicePixelRatio,S=d.customDevicePixelRatio,j=f(a,L),H=function(n){var t=n||o(),r=e.useState(t),i=r[0],a=r[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=n||o();a(e)},t=window.matchMedia("screen and (resolution: ".concat(i,"dppx)"));return t.hasOwnProperty("addEventListener")?t.addEventListener("change",e):t.addListener(e),function(){t.hasOwnProperty("removeEventListener")?t.removeEventListener("change",e):t.removeListener(e)}}},[i,n]),i}(S),M=null!=l?l:{},D=M.maxX,k=M.maxY,I=e.useCallback(function(){var e,n,t,r,i=null!==(n=null===(e=a.current)||void 0===e?void 0:e.clientWidth)&&void 0!==n?n:0,o=null!==(r=null===(t=a.current)||void 0===t?void 0:t.clientHeight)&&void 0!==r?r:0;return T&&l?{width:i,height:i*(l.maxY/l.maxX)}:{width:i,height:o}},[a,T,D,k]);e.useEffect(function(){if(L&&a.current&&r){var e=I(),n=e.width,t=e.height,o=!1;if(i.current){var s=n!==R||t!==w;if(d.fitCanvasToArtboardHeight&&s&&(a.current.style.height=t+"px",o=!0),d.useDevicePixelRatio){if(s||(n*H!==C||t*H!==m)){var u=H*n,l=H*t;i.current.width=u,i.current.height=l,i.current.style.width=n+"px",i.current.style.height=t+"px",O({width:u,height:l}),o=!0}}else s&&(i.current.width=n,i.current.height=t,O({width:n,height:t}),o=!0);y({width:n,height:t})}c&&(x||o)&&c&&c(),x&&P(!1)}},[i,a,j,H,I,x,P,m,C,w,R,c,L,T,z,r])}function p(e){var n=e.setContainerRef,t=e.setCanvasRef,o=e.className,s=void 0===o?"":o,u=e.style,c=e.children,l=a(e,["setContainerRef","setCanvasRef","className","style","children"]),f=i({width:"100%",height:"100%"},u);return r.default.createElement("div",i({ref:n,className:s},!s&&{style:f}),r.default.createElement("canvas",i({ref:t,style:{verticalAlign:"top",width:0,height:0}},l),c))}function w(t,a){void 0===a&&(a={});var o=e.useRef(null),s=e.useRef(null),u=e.useState(null),c=u[0],l=u[1],f=Boolean(t),d=v(a),w=e.useCallback(function(){c&&(c.startRendering(),c.resizeToCanvas())},[c]);h({riveLoaded:!!c,canvasRef:o,containerRef:s,options:d,onCanvasHasResized:w,artboardBounds:null==c?void 0:c.bounds});var R=e.useCallback(function(e){if(e&&t&&f){var r=d.useOffscreenRenderer,a=new n.Rive(i(i({useOffscreenRenderer:r},t),{canvas:e}));a.on(n.EventType.Load,function(){o.current?l(a):a.cleanup()})}else null===e&&o.current&&(o.current.height=0,o.current.width=0);o.current=e},[f]),y=e.useCallback(function(e){s.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?c&&c.startRendering():c&&c.stopRendering()});return o.current&&e.observe(o.current),function(){e.disconnect()}},[c]),e.useEffect(function(){return function(){c&&(c.cleanup(),l(null))}},[c]);var g=null==t?void 0:t.animations;e.useEffect(function(){c&&g&&(c.isPlaying?(c.stop(c.animationNames),c.play(g)):c.isPaused&&(c.stop(c.animationNames),c.pause(g)))},[g,c]);var b=e.useCallback(function(e){return r.default.createElement(p,i({setContainerRef:y,setCanvasRef:R},e))},[R,y]);return{canvas:o.current,container:s.current,setCanvasRef:R,setContainerRef:y,rive:c,RiveComponent:b}}exports.default=function(e){var n=e.src,t=e.artboard,o=e.animations,s=e.stateMachines,u=e.layout,c=e.useOffscreenRenderer,l=void 0===c||c,f=e.shouldDisableRiveListeners,d=void 0!==f&&f,v=e.shouldResizeCanvasToContainer,h=void 0===v||v,p=e.automaticallyHandleEvents,R=void 0!==p&&p,y=e.children,g=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),b=w({src:n,artboard:t,animations:o,layout:u,stateMachines:s,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:R},{useOffscreenRenderer:l,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(b,i({},g),y)},exports.useResizeCanvas=h,exports.useRive=w,exports.useStateMachineInput=function(t,r,i,a){var o=e.useState(null),s=o[0],u=o[1];return e.useEffect(function(){function e(){if(t&&r&&i||u(null),t&&r&&i){var e=t.stateMachineInputs(r);if(e){var n=e.find(function(e){return e.name===i});void 0!==a&&n&&(n.value=a),u(n||null)}}else u(null)}e(),t&&t.on(n.EventType.Play,function(){e()})},[t]),s},Object.keys(n).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return n[e]}})});

package/dist/types/components/Rive.d.ts

@@ -0,0 +1,51 @@
+import { Layout } from '@rive-app/webgl2';
+import React, { ComponentProps } from 'react';
+export interface RiveProps {
+    /**
+     * URL of the Rive asset, or path to where the public asset is stored.
+     */
+    src: string;
+    /**
+     * Artboard to render from the Rive asset.
+     * Defaults to the first artboard created.
+     */
+    artboard?: string;
+    /**
+     * Specify a starting animation to play.
+     */
+    animations?: string | string[];
+    /**
+     * Specify a starting state machine to play.
+     */
+    stateMachines?: string | string[];
+    /**
+     * Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://help.rive.app/runtimes/layout for more on layout configuration.
+     */
+    layout?: Layout;
+    /**
+     * For `@rive-app/react-webgl`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page.
+     */
+    useOffscreenRenderer?: boolean;
+    /**
+     * Specify whether to disable Rive listeners on the canvas, thus preventing any event listeners to be attached to the canvas element
+     */
+    shouldDisableRiveListeners?: boolean;
+    /**
+     * Specify whether to resize the canvas to its container automatically
+     */
+    shouldResizeCanvasToContainer?: boolean;
+    /**
+     * Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
+     * functionality that can be invoked implicitly when detected.
+     *
+     * For example, if during the render loop an OpenUrlEvent is detected, the
+     * browser may try to open the specified URL in the payload.
+     *
+     * This flag is false by default to prevent any unwanted behaviors from taking place.
+     * This means any special Rive Event will have to be handled manually by subscribing to
+     * EventType.RiveEvent
+     */
+    automaticallyHandleEvents?: boolean;
+}
+declare const Rive: ({ src, artboard, animations, stateMachines, layout, useOffscreenRenderer, shouldDisableRiveListeners, shouldResizeCanvasToContainer, automaticallyHandleEvents, children, ...rest }: RiveProps & ComponentProps<'canvas'>) => React.JSX.Element;
+export default Rive;

package/dist/types/hooks/useContainerSize.d.ts

@@ -0,0 +1,10 @@
+import { Dimensions } from '../types';
+/**
+ * Hook to listen for a ref element's resize events being triggered. When resized,
+ * it sets state to an object of {width: number, height: number} indicating the contentRect
+ * size of the element at the new resize.
+ *
+ * @param containerRef - Ref element to listen for resize events on
+ * @returns - Size object with width and height attributes
+ */
+export default function useSize(containerRef: React.MutableRefObject<HTMLElement | null>, shouldResizeCanvasToContainer?: boolean): Dimensions;

package/dist/types/hooks/useDevicePixelRatio.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Listen for devicePixelRatio changes and set the new value accordingly. This could
+ * happen for reasons such as:
+ * - User moves window from retina screen display to a separate monitor
+ * - User controls zoom settings on the browser
+ *
+ * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
+ *
+ * @param customDevicePixelRatio - Number to force a dpr to abide by, rather than using the window's
+ *
+ * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
+ */
+export default function useDevicePixelRatio(customDevicePixelRatio?: number): number;

package/dist/types/hooks/useResizeCanvas.d.ts

@@ -0,0 +1,52 @@
+import { MutableRefObject } from 'react';
+import { Bounds } from '@rive-app/webgl2';
+import { UseRiveOptions } from '../types';
+interface UseResizeCanvasProps {
+    /**
+     * Whether or not Rive is loaded and renderer is associated with the canvas
+     */
+    riveLoaded: boolean;
+    /**
+     * Ref to the canvas element
+     */
+    canvasRef: MutableRefObject<HTMLCanvasElement | null>;
+    /**
+     * Ref to the container element of the canvas
+     */
+    containerRef: MutableRefObject<HTMLElement | null>;
+    /**
+     * (Optional) Callback to be invoked after the canvas has been resized due to a resize
+     * of its parent container. This is where you would want to reset the layout
+     * dimensions for the Rive renderer to dictate the new min/max bounds of the
+     * canvas.
+     *
+     * Using the high-level JS runtime, this might be a simple call to `rive.resizeToCanvas()`
+     * Using the low-level JSruntime, this might be invoking the renderer's `.align()` method
+     * with the Layout and min/max X/Y values of the canvas.
+     *
+     * @returns void
+     */
+    onCanvasHasResized?: () => void;
+    /**
+     * (Optional) Options passed to the useRive hook, including the shouldResizeCanvasToContainer option
+     * which prevents the canvas element from resizing to its parent container
+     */
+    options?: Partial<UseRiveOptions>;
+    /**
+     * (Optional) AABB bounds of the artboard. If provided, the canvas will be sized to the artboard
+     * height if the fitCanvasToArtboardHeight option is true.
+     */
+    artboardBounds?: Bounds;
+}
+/**
+ * Helper hook to listen for changes in the <canvas> parent container size and size the <canvas>
+ * to match. If a resize event has occurred, a supplied callback (onCanvasHasResized)
+ * will be inokved to allow for any re-calculation needed (i.e. Rive layout on the canvas).
+ *
+ * This hook is useful if you are not intending to use the `useRive` hook yourself, but still
+ * want to use the auto-sizing logic on the canvas/container.
+ *
+ * @param props - Object to supply necessary props to the hook
+ */
+export default function useResizeCanvas({ riveLoaded, canvasRef, containerRef, options, onCanvasHasResized, artboardBounds, }: UseResizeCanvasProps): void;
+export {};

package/dist/types/hooks/useRive.d.ts

@@ -0,0 +1,16 @@
+import { UseRiveParameters, UseRiveOptions, RiveState } from '../types';
+/**
+ * Custom Hook for loading a Rive file.
+ *
+ * Waits until the load event has fired before returning it.
+ * We can then listen for changes to this animation in other hooks to detect
+ * when it has loaded.
+ *
+ * @param riveParams - Object containing parameters accepted by the Rive object
+ *   in the rive-js runtime, with the exception of Canvas as that is attached
+ *   via the ref callback `setCanvasRef`.
+ *
+ * @param opts - Optional list of options that are specific for this hook.
+ * @returns {RiveAnimationState}
+ */
+export default function useRive(riveParams?: UseRiveParameters, opts?: Partial<UseRiveOptions>): RiveState;

package/dist/types/hooks/useStateMachineInput.d.ts

@@ -0,0 +1,10 @@
+import { Rive, StateMachineInput } from '@rive-app/webgl2';
+/**
+ * Custom hook for fetching a stateMachine input from a rive file.
+ *
+ * @param rive - Rive instance
+ * @param stateMachineName - Name of the state machine
+ * @param inputName - Name of the input
+ * @returns
+ */
+export default function useStateMachineInput(rive: Rive | null, stateMachineName?: string, inputName?: string, initialValue?: number | boolean): StateMachineInput | null;

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+import Rive, { RiveProps } from './components/Rive';
+import useRive from './hooks/useRive';
+import useStateMachineInput from './hooks/useStateMachineInput';
+import useResizeCanvas from './hooks/useResizeCanvas';
+export default Rive;
+export { useRive, useStateMachineInput, useResizeCanvas, RiveProps };
+export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
+export * from '@rive-app/webgl2';

package/dist/types/types.d.ts

@@ -0,0 +1,33 @@
+import { RefCallback, ComponentProps } from 'react';
+import { Rive, RiveParameters } from '@rive-app/webgl2';
+export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
+export type UseRiveOptions = {
+    useDevicePixelRatio: boolean;
+    customDevicePixelRatio: number;
+    fitCanvasToArtboardHeight: boolean;
+    useOffscreenRenderer: boolean;
+    shouldResizeCanvasToContainer: boolean;
+};
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+/**
+ * @typedef RiveState
+ * @property canvas - Canvas element the Rive Animation is attached to.
+ * @property container - Container element of the canvas.
+ * @property setCanvasRef - Ref callback to be passed to the canvas element.
+ * @property setContainerRef - Ref callback to be passed to the container element
+ *   of the canvas. This is optional, however if not used then the hook will
+ *   not take care of automatically resizing the canvas to it's outer
+ *   container if the window resizes.
+ * @property rive - The loaded Rive Animation
+ */
+export type RiveState = {
+    canvas: HTMLCanvasElement | null;
+    container: HTMLElement | null;
+    setCanvasRef: RefCallback<HTMLCanvasElement>;
+    setContainerRef: RefCallback<HTMLElement>;
+    rive: Rive | null;
+    RiveComponent: (props: ComponentProps<'canvas'>) => JSX.Element;
+};

package/dist/types/utils.d.ts

@@ -0,0 +1,7 @@
+import { UseRiveOptions } from './types';
+export declare function getOptions(opts: Partial<UseRiveOptions>): {
+    useDevicePixelRatio: boolean;
+    fitCanvasToArtboardHeight: boolean;
+    useOffscreenRenderer: boolean;
+    shouldResizeCanvasToContainer: boolean;
+} & Partial<UseRiveOptions>;

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@rive-app/react-webgl2",
+  "version": "4.8.4",
+  "description": "React wrapper around the @rive-app/webgl2 library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}