@rive-app/react-webgl2 4.9.5 → 4.10.0

package/dist/index.js

@@ -1 +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]}})});
+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 i=/*#__PURE__*/t(e),r=function(){return r=Object.assign||function(e){for(var n,t=1,i=arguments.length;t<i;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},r.apply(this,arguments)};function o(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t}function a(e,n,t,i){return new(t||(t=Promise))(function(r,o){function a(e){try{u(i.next(e))}catch(e){o(e)}}function s(e){try{u(i.throw(e))}catch(e){o(e)}}function u(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t(function(e){e(n)})).then(a,s)}u((i=i.apply(e,n||[])).next())})}function s(e,n){var t,i,r,o,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(s){return function(u){return function(s){if(t)throw new TypeError("Generator is already executing.");for(;o&&(o=0,s[0]&&(a=0)),a;)try{if(t=1,i&&(r=2&s[0]?i.return:s[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;switch(i=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,i=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(r=a.trys,(r=r.length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){a.label=s[1];break}if(6===s[0]&&a.label<r[1]){a.label=r[1],r=s;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(s);break}r[2]&&a.ops.pop(),a.trys.pop();continue}s=n.call(e,a)}catch(e){s=[6,e],i=0}finally{t=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}}function u(){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 c=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var l=globalThis.ResizeObserver||c,f=void 0!==globalThis.ResizeObserver,d=!f;function v(n,t){void 0===t&&(t=!0);var i=e.useState({width:0,height:0}),r=i[0],o=i[1];e.useEffect(function(){if("undefined"!=typeof window&&t){var e=function(){o({width:window.innerWidth,height:window.innerHeight})};return d&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var a,s,u,c=e.useRef(new l((a=function(e){f&&o({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},s=0,u=0,function(){for(var e=this,n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];clearTimeout(u),u=window.setTimeout(function(){return a.apply(e,n)},s)})));return e.useEffect(function(){var e=c.current;if(t){var i=n.current;return n.current&&f&&e.observe(n.current),function(){e.disconnect(),i&&f&&e.unobserve(i)}}e.disconnect()},[n,c]),r}var h={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function p(e){return Object.assign({},h,e)}function b(n){var t=n.riveLoaded,i=void 0!==t&&t,r=n.canvasElem,o=n.containerRef,a=n.options,s=void 0===a?{}:a,c=n.onCanvasHasResized,l=n.artboardBounds,f=p(s),d=e.useState({height:0,width:0}),h=d[0],b=h.height,w=h.width,y=d[1],g=e.useState({height:0,width:0}),m=g[0],R=m.height,C=m.width,E=g[1],O=e.useState(!0),x=O[0],T=O[1],P=f.fitCanvasToArtboardHeight,S=f.shouldResizeCanvasToContainer,k=f.useDevicePixelRatio,L=f.customDevicePixelRatio,M=v(o,S),z=function(n){var t=n||u(),i=e.useState(t),r=i[0],o=i[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=n||u();o(e)},t=window.matchMedia("screen and (resolution: ".concat(r,"dppx)"));return t.hasOwnProperty("addEventListener")?t.addEventListener("change",e):t.addListener(e),function(){t.hasOwnProperty("removeEventListener")?t.removeEventListener("change",e):t.removeListener(e)}}},[r,n]),r}(L),H=null!=l?l:{},j=H.maxX,I=H.maxY,D=e.useCallback(function(){var e,n,t,i,r=null!==(n=null===(e=o.current)||void 0===e?void 0:e.clientWidth)&&void 0!==n?n:0,a=null!==(i=null===(t=o.current)||void 0===t?void 0:t.clientHeight)&&void 0!==i?i:0;return P&&l?{width:r,height:r*(l.maxY/l.maxX)}:{width:r,height:a}},[o,P,j,I]);e.useEffect(function(){if(S&&o.current&&i){var e=D(),n=e.width,t=e.height,a=!1;if(r){var s=n!==w||t!==b;if(f.fitCanvasToArtboardHeight&&s&&(o.current.style.height=t+"px",a=!0),f.useDevicePixelRatio){if(s||(n*z!==C||t*z!==R)){var u=z*n,l=z*t;r.width=u,r.height=l,r.style.width=n+"px",r.style.height=t+"px",E({width:u,height:l}),a=!0}}else s&&(r.width=n,r.height=t,E({width:n,height:t}),a=!0);y({width:n,height:t})}c&&(x||a)&&c&&c(),x&&T(!1)}},[r,o,M,z,D,x,T,R,C,b,w,c,S,P,k,i]),e.useEffect(function(){E({width:0,height:0})},[r])}var w,y=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}(),g=globalThis.IntersectionObserver||y,m=function(){function e(){var e=this;this.elementsMap=new Map,this.onObserved=function(n){n.forEach(function(n){var t=e.elementsMap.get(n.target);t&&t(n)})},this.observer=new g(this.onObserved)}return e.prototype.registerCallback=function(e,n){this.observer.observe(e),this.elementsMap.set(e,n)},e.prototype.removeCallback=function(e){this.observer.unobserve(e),this.elementsMap.delete(e)},e}(),R=function(){return w||(w=new m),w};function C(e){var n=e.setContainerRef,t=e.setCanvasRef,a=e.className,s=void 0===a?"":a,u=e.style,c=e.children,l=o(e,["setContainerRef","setCanvasRef","className","style","children"]),f=r({width:"100%",height:"100%"},u);return i.default.createElement("div",r({ref:n,className:s},!s&&{style:f}),i.default.createElement("canvas",r({ref:t,style:{verticalAlign:"top",width:0,height:0}},l),c))}function E(t,o){void 0===o&&(o={});var a=e.useState(null),s=a[0],u=a[1],c=e.useRef(null),l=e.useState(null),f=l[0],d=l[1],v=Boolean(t),h=p(o),w=e.useCallback(function(){f&&(f.startRendering(),f.resizeToCanvas())},[f]);b({riveLoaded:!!f,canvasElem:s,containerRef:c,options:h,onCanvasHasResized:w,artboardBounds:null==f?void 0:f.bounds});var y=e.useCallback(function(e){null===e&&s&&(s.height=0,s.width=0),u(e)},[]);e.useEffect(function(){if(s&&t&&null==f){var e=h.useOffscreenRenderer,i=new n.Rive(r(r({useOffscreenRenderer:e},t),{canvas:s}));i.on(n.EventType.Load,function(){s?d(i):i.cleanup()})}},[s,v,f]);var g=e.useCallback(function(e){c.current=e},[]),m={observe:e.useCallback(function(e,n){R().registerCallback(e,n)},[]),unobserve:e.useCallback(function(e){R().removeCallback(e)},[])},E=m.observe,O=m.unobserve;e.useEffect(function(){var e,n=!1,t=function(){if(s&&n){var e=s.getBoundingClientRect();e.width>0&&e.height>0&&e.top<(window.innerHeight||document.documentElement.clientHeight)&&e.bottom>0&&e.left<(window.innerWidth||document.documentElement.clientWidth)&&e.right>0&&(null==f||f.startRendering(),n=!1)}};return s&&!1!==h.shouldUseIntersectionObserver&&E(s,function(i){i.isIntersecting?f&&f.startRendering():f&&f.stopRendering(),n=!i.isIntersecting,clearTimeout(e),i.isIntersecting||0!==i.boundingClientRect.width||(e=setTimeout(t,10))}),function(){s&&O(s)}},[E,O,f,s,h.shouldUseIntersectionObserver]),e.useEffect(function(){return function(){f&&(f.cleanup(),d(null))}},[f,s]);var x=null==t?void 0:t.animations;e.useEffect(function(){f&&x&&(f.isPlaying?(f.stop(f.animationNames),f.play(x)):f.isPaused&&(f.stop(f.animationNames),f.pause(x)))},[x,f]);var T=e.useCallback(function(e){return i.default.createElement(C,r({setContainerRef:g,setCanvasRef:y},e))},[y,g]);return{canvas:s,container:c.current,setCanvasRef:y,setContainerRef:g,rive:f,RiveComponent:T}}exports.default=function(e){var n=e.src,t=e.artboard,a=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,b=void 0!==p&&p,w=e.children,y=o(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),g=E({src:n,artboard:t,animations:a,layout:u,stateMachines:s,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:b},{useOffscreenRenderer:l,shouldResizeCanvasToContainer:h}).RiveComponent;return i.default.createElement(g,r({},y),w)},exports.useResizeCanvas=b,exports.useRive=E,exports.useRiveFile=function(t){var i=this,r=e.useState(null),o=r[0],u=r[1],c=e.useState("idle"),l=c[0],f=c[1];return e.useEffect(function(){var e=null;return a(i,void 0,void 0,function(){return s(this,function(i){return f("loading"),(e=new n.RiveFile(t)).init(),e.on(n.EventType.Load,function(){null==e||e.getInstance(),u(e),f("success")}),e.on(n.EventType.LoadError,function(){f("failed")}),u(e),[2]})}),function(){null==e||e.cleanup()}},[t.src,t.buffer]),{riveFile:o,status:l}},exports.useStateMachineInput=function(t,i,r,o){var a=e.useState(null),s=a[0],u=a[1];return e.useEffect(function(){function e(){if(t&&i&&r||u(null),t&&i&&r){var e=t.stateMachineInputs(i);if(e){var n=e.find(function(e){return e.name===r});void 0!==o&&n&&(n.value=o),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/hooks/elementObserver.d.ts

@@ -0,0 +1,9 @@
+declare class ElementObserver {
+    private observer;
+    private elementsMap;
+    constructor();
+    onObserved: (entries: IntersectionObserverEntry[]) => void;
+    registerCallback(element: Element, callback: Function): void;
+    removeCallback(element: Element): void;
+}
+export default ElementObserver;

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

@@ -0,0 +1,9 @@
+/**
+ * Hook to observe elements when they are intersecting with the viewport
+ *
+ * @returns - API to observer and unobserve elements
+ */
+export default function useIntersectionObserver(): {
+    observe: (element: Element, callback: Function) => void;
+    unobserve: (element: Element) => void;
+};

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

@@ -9,7 +9,7 @@ interface UseResizeCanvasProps {
     /**
      * Ref to the canvas element
      */
-    canvasRef: MutableRefObject<HTMLCanvasElement | null>;
+    canvasElem: HTMLCanvasElement | null;
     /**
      * Ref to the container element of the canvas
      */
@@ -48,5 +48,5 @@ interface UseResizeCanvasProps {
  *
  * @param props - Object to supply necessary props to the hook
  */
-export default function useResizeCanvas({ riveLoaded, canvasRef, containerRef, options, onCanvasHasResized, artboardBounds, }: UseResizeCanvasProps): void;
+export default function useResizeCanvas({ riveLoaded, canvasElem, containerRef, options, onCanvasHasResized, artboardBounds, }: UseResizeCanvasProps): void;
 export {};

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

@@ -0,0 +1,12 @@
+import type { UseRiveFileParameters, RiveFileState } from '../types';
+/**
+ * Custom hook for initializing and managing a RiveFile instance within a component.
+ * It sets up a RiveFile based on provided source parameters (URL or ArrayBuffer) and ensures
+ * proper cleanup to avoid memory leaks when the component unmounts or inputs change.
+ *
+ * @param params - Object containing parameters accepted by the Rive file in the @rive-app/webgl2 runtime,
+ *
+ * @returns {RiveFileState} Contains the active RiveFile instance (`riveFile`) and the loading status.
+ */
+declare function useRiveFile(params: UseRiveFileParameters): RiveFileState;
+export default useRiveFile;

package/dist/types/index.d.ts

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

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
-import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from '@rive-app/webgl2';
+import { Rive, RiveFile, RiveFileParameters, RiveParameters } from '@rive-app/webgl2';
+import { ComponentProps, RefCallback } from 'react';
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 export type UseRiveOptions = {
     useDevicePixelRatio: boolean;
@@ -7,6 +7,7 @@ export type UseRiveOptions = {
     fitCanvasToArtboardHeight: boolean;
     useOffscreenRenderer: boolean;
     shouldResizeCanvasToContainer: boolean;
+    shouldUseIntersectionObserver?: boolean;
 };
 export type Dimensions = {
     width: number;
@@ -17,9 +18,9 @@ export type Dimensions = {
  * @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
+ * @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
  */
@@ -31,3 +32,14 @@ export type RiveState = {
     rive: Rive | null;
     RiveComponent: (props: ComponentProps<'canvas'>) => JSX.Element;
 };
+export type UseRiveFileParameters = Partial<Omit<RiveFileParameters, 'onLoad' | 'onLoadError'>>;
+export type FileStatus = 'idle' | 'loading' | 'failed' | 'success';
+/**
+ * @typedef RiveFileState
+ * @property data - The RiveFile instance
+ * @property status - The status of the file
+ */
+export type RiveFileState = {
+    riveFile: RiveFile | null;
+    status: FileStatus;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.9.5",
+  "version": "4.10.0",
   "description": "React wrapper around the @rive-app/webgl2 library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",