@rive-app/react-webgl2 4.27.1 → 4.27.3

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),u=function(){return u=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var u in n=arguments[t])Object.prototype.hasOwnProperty.call(n,u)&&(e[u]=n[u]);return e},u.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 u=0;for(r=Object.getOwnPropertySymbols(e);u<r.length;u++)n.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(e,r[u])&&(t[r[u]]=e[r[u]])}return t}function i(e,n,t,r){return new(t||(t=Promise))(function(u,a){function i(e){try{l(r.next(e))}catch(e){a(e)}}function o(e){try{l(r.throw(e))}catch(e){a(e)}}function l(e){var n;e.done?u(e.value):(n=e.value,n instanceof t?n:new t(function(e){e(n)})).then(i,o)}l((r=r.apply(e,n||[])).next())})}function o(e,n){var t,r,u,a,i={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return a={next:o(0),throw:o(1),return:o(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function o(a){return function(o){return function(a){if(t)throw new TypeError("Generator is already executing.");for(;i;)try{if(t=1,r&&(u=2&a[0]?r.return:a[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,a[1])).done)return u;switch(r=0,u&&(a=[2&a[0],u.value]),a[0]){case 0:case 1:u=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,r=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(u=i.trys,(u=u.length>0&&u[u.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!u||a[1]>u[0]&&a[1]<u[3])){i.label=a[1];break}if(6===a[0]&&i.label<u[1]){i.label=u[1],u=a;break}if(u&&i.label<u[2]){i.label=u[2],i.ops.push(a);break}u[2]&&i.ops.pop(),i.trys.pop();continue}a=n.call(e,i)}catch(e){a=[6,e],r=0}finally{t=u=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,o])}}}function l(n){var t=n||c(),r=e.useState(t),u=r[0],a=r[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=n||c();a(e)},t=window.matchMedia("screen and (resolution: ".concat(u,"dppx)"));return t.hasOwnProperty("addEventListener")?t.addEventListener("change",e):t.addListener(e),function(){t.hasOwnProperty("removeEventListener")?t.removeEventListener("change",e):t.removeListener(e)}}},[u,n]),u}function c(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}var s=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var f=globalThis.ResizeObserver||s,d=void 0!==globalThis.ResizeObserver,v=!d;function p(n,t){void 0===t&&(t=!0);var r=e.useState({width:0,height:0}),u=r[0],a=r[1];e.useEffect(function(){if("undefined"!=typeof window&&t){var e=function(){a({width:window.innerWidth,height:window.innerHeight})};return v&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var i,o,l,c=e.useRef(new f((i=function(e){d&&a({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},o=0,l=0,function(){for(var e=this,n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];clearTimeout(l),l=window.setTimeout(function(){return i.apply(e,n)},o)})));return e.useEffect(function(){var e=c.current;if(t){var r=n.current;return n.current&&d&&e.observe(n.current),function(){e.disconnect(),r&&d&&e.unobserve(r)}}e.disconnect()},[n,c]),u}var h={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function b(e){return Object.assign({},h,e)}function g(n){var t=n.riveLoaded,r=void 0!==t&&t,u=n.canvasElem,a=n.containerRef,i=n.options,o=void 0===i?{}:i,c=n.onCanvasHasResized,s=n.artboardBounds,f=b(o),d=e.useState({height:0,width:0}),v=d[0],h=v.height,g=v.width,y=d[1],w=e.useState({height:0,width:0}),m=w[0],C=m.height,R=m.width,E=w[1],V=e.useState(!0),x=V[0],k=V[1],O=f.fitCanvasToArtboardHeight,I=f.shouldResizeCanvasToContainer,P=f.useDevicePixelRatio,M=f.customDevicePixelRatio,T=p(a,I),S=l(M),D=null!=s?s:{},L=D.maxX,A=D.maxY,z=e.useCallback(function(){var e,n,t,r,u=null!==(n=null===(e=a.current)||void 0===e?void 0:e.clientWidth)&&void 0!==n?n:0,i=null!==(r=null===(t=a.current)||void 0===t?void 0:t.clientHeight)&&void 0!==r?r:0;return O&&s?{width:u,height:u*(s.maxY/s.maxX)}:{width:u,height:i}},[a,O,L,A]);e.useEffect(function(){if(I&&a.current&&r){var e=z(),n=e.width,t=e.height,i=!1;if(u){var o=n!==g||t!==h;if(f.fitCanvasToArtboardHeight&&o&&(a.current.style.height=t+"px",i=!0),f.useDevicePixelRatio){if(o||(n*S!==R||t*S!==C)){var l=S*n,s=S*t;u.width=l,u.height=s,u.style.width=n+"px",u.style.height=t+"px",E({width:l,height:s}),i=!0}}else o&&(u.width=n,u.height=t,E({width:n,height:t}),i=!0);y({width:n,height:t})}c&&(x||i)&&c&&c(),x&&k(!1)}},[u,a,T,S,z,x,k,C,R,h,g,c,I,O,P,r]),e.useEffect(function(){E({width:0,height:0})},[u])}var y,w=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}(),m=globalThis.IntersectionObserver||w,C=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 m(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 y||(y=new C),y};function E(e){var n=e.setContainerRef,t=e.setCanvasRef,i=e.className,o=void 0===i?"":i,l=e.style,c=e.children,s=a(e,["setContainerRef","setCanvasRef","className","style","children"]),f=u({width:"100%",height:"100%"},l);return r.default.createElement("div",u({ref:n,className:o},!o&&{style:f}),r.default.createElement("canvas",u({ref:t,style:{verticalAlign:"top",width:0,height:0}},s),c))}function V(t,i){void 0===i&&(i={});var o=e.useState(null),c=o[0],s=o[1],f=e.useRef(null),d=e.useRef(null),v=e.useState(null),p=v[0],h=v[1],y=Boolean(t),w=b(i),m=l(),C=e.useCallback(function(){if(p){if(p.layout&&p.layout.fit===n.Fit.Layout&&c){var e=m*p.layout.layoutScaleFactor;p.devicePixelRatioUsed=m,p.artboardWidth=(null==c?void 0:c.width)/e,p.artboardHeight=(null==c?void 0:c.height)/e}p.startRendering(),p.resizeToCanvas()}},[p,m]);g({riveLoaded:!!p,canvasElem:c,containerRef:f,options:w,onCanvasHasResized:C,artboardBounds:null==p?void 0:p.bounds});var V=e.useCallback(function(e){null===e&&c&&(c.height=0,c.width=0),s(e)},[]);e.useEffect(function(){if(c&&t){var e,r=null!=p;if(null==p){var i=w.useOffscreenRenderer,o=t.onRiveReady,l=a(t,["onRiveReady"]);e=new n.Rive(u(u({useOffscreenRenderer:i},l),{canvas:c})),null!=d.current&&d.current.cleanup(),d.current=e,e.on(n.EventType.Load,function(){r=!0,o&&o(e),c?h(e):e.cleanup()})}return function(){r||null==e||e.cleanup()}}},[c,y,p]);var x=e.useCallback(function(e){f.current=e},[]),k={observe:e.useCallback(function(e,n){R().registerCallback(e,n)},[]),unobserve:e.useCallback(function(e){R().removeCallback(e)},[])},O=k.observe,I=k.unobserve;e.useEffect(function(){var e,n=!1,t=function(){if(c&&n){var e=c.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==p||p.startRendering(),n=!1)}};return c&&!1!==w.shouldUseIntersectionObserver&&O(c,function(r){r.isIntersecting?p&&p.startRendering():p&&p.stopRendering(),n=!r.isIntersecting,clearTimeout(e),r.isIntersecting||0!==r.boundingClientRect.width||(e=setTimeout(t,10))}),function(){c&&I(c)}},[O,I,p,c,w.shouldUseIntersectionObserver]),e.useEffect(function(){return function(){p&&(p.cleanup(),h(null))}},[p,c]),e.useEffect(function(){return function(){null!=d.current&&d.current.cleanup()}},[]);var P=null==t?void 0:t.animations;e.useEffect(function(){p&&P&&(p.isPlaying?(p.stop(p.animationNames),p.play(P)):p.isPaused&&(p.stop(p.animationNames),p.pause(P)))},[P,p]);var M=e.useCallback(function(e){return r.default.createElement(E,u({setContainerRef:x,setCanvasRef:V},e))},[V,x]);return{canvas:c,container:f.current,setCanvasRef:V,setContainerRef:x,rive:p,RiveComponent:M}}function x(n,t,r){var a=e.useState(null),i=a[0],o=a[1],l=e.useState(r.defaultValue),c=l[0],s=l[1],f=e.useState(null),d=f[0],v=f[1],p=e.useRef(null),h=e.useRef(n),b=e.useRef(r);e.useEffect(function(){b.current=r},[r]);var g=e.useCallback(function(){var e=p.current,n=h.current,t=b.current;if(!e||!n)return o(null),s(t.defaultValue),v(null),function(){};var r=t.getProperty(e,n);if(r){o(r),s(t.getValue(r)),t.getExtendedData&&v(t.getExtendedData(r));var u=function(){s(t.getValue(r)),t.getExtendedData&&v(t.getExtendedData(r)),t.onPropertyEvent&&t.onPropertyEvent()};return r.on(u),function(){r.off(u)}}return function(){}},[]);e.useEffect(function(){return p.current=t,h.current=n,g()},[t,n,g]);var y=e.useCallback(function(e){if(i&&p.current===t)try{return e(i),void(b.current.getExtendedData&&v(b.current.getExtendedData(i)))}catch(e){}if(p.current)try{var n=b.current.getProperty(p.current,h.current);n&&(o(n),e(n),b.current.getExtendedData&&v(b.current.getExtendedData(n)))}catch(e){}},[i,t]),w=e.useMemo(function(){return b.current.buildPropertyOperations(y)},[y]),m=u({value:c},w);return r.getExtendedData&&(m.extendedData=d),m}exports.default=function(e){var n=e.src,t=e.artboard,i=e.animations,o=e.stateMachines,l=e.layout,c=e.useOffscreenRenderer,s=void 0===c||c,f=e.shouldDisableRiveListeners,d=void 0!==f&&f,v=e.shouldResizeCanvasToContainer,p=void 0===v||v,h=e.automaticallyHandleEvents,b=void 0!==h&&h,g=e.children,y=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),w=V({src:n,artboard:t,animations:i,layout:l,stateMachines:o,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:b},{useOffscreenRenderer:s,shouldResizeCanvasToContainer:p}).RiveComponent;return r.default.createElement(w,u({},y),g)},exports.useResizeCanvas=g,exports.useRive=V,exports.useRiveFile=function(t){var r=this,u=e.useState(null),a=u[0],l=u[1],c=e.useState("idle"),s=c[0],f=c[1];return e.useEffect(function(){var e=null;return i(r,void 0,void 0,function(){return o(this,function(r){try{f("loading"),(e=new n.RiveFile(t)).init(),e.on(n.EventType.Load,function(){null==e||e.getInstance(),l(e),f("success")}),e.on(n.EventType.LoadError,function(){f("failed")}),l(e)}catch(e){console.error(e),f("failed")}return[2]})}),function(){null==e||e.cleanup()}},[t.src,t.buffer]),{riveFile:a,status:s}},exports.useStateMachineInput=function(t,r,u,a){var i=e.useState(null),o=i[0],l=i[1];return e.useEffect(function(){function e(){if(t&&r&&u||l(null),t&&r&&u){var e=t.stateMachineInputs(r);if(e){var n=e.find(function(e){return e.name===u});void 0!==a&&n&&(n.value=a),l(n||null)}}else l(null)}e(),t&&t.on(n.EventType.Load,function(){e()})},[t]),o},exports.useViewModel=function(t,r){var u=null!=r?r:{},a=u.name,i=u.useDefault,o=void 0!==i&&i,l=e.useState(null),c=l[0],s=l[1];return e.useEffect(function(){function e(){var e;if(t){var n=null;n=null!=a?(null===(e=t.viewModelByName)||void 0===e?void 0:e.call(t,a))||null:t.defaultViewModel()||null,s(n)}else s(null)}return e(),t&&t.on(n.EventType.Load,e),function(){t&&t.off(n.EventType.Load,e)}},[t,a,o]),c},exports.useViewModelInstance=function(n,t){var r=null!=t?t:{},u=r.name,a=r.useDefault,i=void 0!==a&&a,o=r.useNew,l=void 0!==o&&o,c=r.rive,s=e.useState(null),f=s[0],d=s[1];return e.useEffect(function(){var e,t,r;if(n){var a=null;a=null!=u?n.instanceByName(u)||null:i?(null===(e=n.defaultInstance)||void 0===e?void 0:e.call(n))||null:l?(null===(t=n.instance)||void 0===t?void 0:t.call(n))||null:(null===(r=n.defaultInstance)||void 0===r?void 0:r.call(n))||null,d(a),c&&a&&c.viewModelInstance!==a&&c.bindViewModelInstance(a)}else d(null)},[n,u,i,l,c]),f},exports.useViewModelInstanceArtboard=function(n,t){return{setValue:x(n,t,{getProperty:e.useCallback(function(e,n){return e.artboard(n)},[]),getValue:e.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(n){e(function(e){e.value=n})}}},[])}).setValue}},exports.useViewModelInstanceBoolean=function(n,t){var r=x(n,t,{getProperty:e.useCallback(function(e,n){return e.boolean(n)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(n){e(function(e){e.value=n})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceColor=function(n,t){var r=x(n,t,{getProperty:e.useCallback(function(e,n){return e.color(n)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(n){e(function(e){e.value=n})},setRgb:function(n,t,r){e(function(e){e.rgb(n,t,r)})},setRgba:function(n,t,r,u){e(function(e){e.rgba(n,t,r,u)})},setAlpha:function(n){e(function(e){e.alpha(n)})},setOpacity:function(n){e(function(e){e.opacity(n)})}}},[])});return{value:r.value,setValue:r.setValue,setRgb:r.setRgb,setRgba:r.setRgba,setAlpha:r.setAlpha,setOpacity:r.setOpacity}},exports.useViewModelInstanceEnum=function(n,t){var r=x(n,t,{getProperty:e.useCallback(function(e,n){return e.enum(n)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,getExtendedData:e.useCallback(function(e){return e.values},[]),buildPropertyOperations:e.useCallback(function(e){return{setValue:function(n){e(function(e){e.value=n})}}},[])});return{value:r.value,values:r.extendedData||[],setValue:r.setValue}},exports.useViewModelInstanceImage=function(n,t){return{setValue:x(n,t,{getProperty:e.useCallback(function(e,n){return e.image(n)},[]),getValue:e.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(n){e(function(e){e.value=n})}}},[])}).setValue}},exports.useViewModelInstanceList=function(n,t){var r,u=e.useState(0)[1],a=x(n,t,{getProperty:e.useCallback(function(e,n){return e.list(n)},[]),getValue:e.useCallback(function(e){return e.length},[]),defaultValue:null,onPropertyEvent:function(){u(function(e){return e+1})},buildPropertyOperations:e.useCallback(function(e){return{addInstance:function(n){e(function(e){return e.addInstance(n)})},addInstanceAt:function(n,t){var r=!1;return e(function(e){r=e.addInstanceAt(n,t)}),r},removeInstance:function(n){e(function(e){return e.removeInstance(n)})},removeInstanceAt:function(n){e(function(e){return e.removeInstanceAt(n)})},getInstanceAt:function(n){var t=null;return e(function(e){t=e.instanceAt(n)}),t},swap:function(n,t){e(function(e){return e.swap(n,t)})}}},[])});return{length:null!==(r=a.value)&&void 0!==r?r:0,addInstance:a.addInstance,addInstanceAt:a.addInstanceAt,removeInstance:a.removeInstance,removeInstanceAt:a.removeInstanceAt,getInstanceAt:a.getInstanceAt,swap:a.swap}},exports.useViewModelInstanceNumber=function(n,t){var r=x(n,t,{getProperty:e.useCallback(function(e,n){return e.number(n)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(n){e(function(e){e.value=n})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceString=function(n,t){var r=x(n,t,{getProperty:e.useCallback(function(e,n){return e.string(n)},[]),getValue:e.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:e.useCallback(function(e){return{setValue:function(n){e(function(e){e.value=n})}}},[])});return{value:r.value,setValue:r.setValue}},exports.useViewModelInstanceTrigger=function(n,t,r){var u=(null!=r?r:{}).onTrigger;return{trigger:x(n,t,{getProperty:e.useCallback(function(e,n){return e.trigger(n)},[]),getValue:e.useCallback(function(){},[]),defaultValue:null,onPropertyEvent:u,buildPropertyOperations:e.useCallback(function(e){return{trigger:function(){e(function(e){e.trigger()})}}},[])}).trigger}},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 observer,React=require("react"),canvas=require("@rive-app/webgl2");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);function useDevicePixelRatio(e){var t=e||getDevicePixelRatio(),n=React.useState(t),a=n[0],r=n[1];return React.useEffect(function(){if("u">typeof window&&"matchMedia"in window){var t=function(){r(e||getDevicePixelRatio())},n=window.matchMedia("screen and (resolution: "+a+"dppx)");return n.hasOwnProperty("addEventListener")?n.addEventListener("change",t):n.addListener(t),function(){n.hasOwnProperty("removeEventListener")?n.removeEventListener("change",t):n.removeListener(t)}}},[a,e]),a}function getDevicePixelRatio(){return Math.min(Math.max(1,"u">typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1),3)}var FakeResizeObserver=/*#__PURE__*/function(){function e(){}var t=e.prototype;return t.observe=function(){},t.unobserve=function(){},t.disconnect=function(){},e}();function throttle(e,t){var n=0;return function(){for(var a=this,r=arguments.length,u=Array(r),i=0;i<r;i++)u[i]=arguments[i];clearTimeout(n),n=window.setTimeout(function(){return e.apply(a,u)},t)}}var MyResizeObserver=globalThis.ResizeObserver||FakeResizeObserver,hasResizeObserver=void 0!==globalThis.ResizeObserver,useResizeObserver=hasResizeObserver,useWindowListener=!useResizeObserver;function useSize(e,t){void 0===t&&(t=!0);var n=React.useState({width:0,height:0}),a=n[0],r=n[1];React.useEffect(function(){if("u">typeof window&&t){var e=function(){r({width:window.innerWidth,height:window.innerHeight})};return useWindowListener&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var u=React.useRef(new MyResizeObserver(throttle(function(e){useResizeObserver&&r({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},0)));return React.useEffect(function(){var n=u.current;if(!t)return void n.disconnect();var a=e.current;return e.current&&useResizeObserver&&n.observe(e.current),function(){n.disconnect(),a&&useResizeObserver&&n.unobserve(a)}},[e,u]),a}var defaultOptions={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function getOptions(e){return Object.assign({},defaultOptions,e)}function useResizeCanvas(e){var t=e.riveLoaded,n=void 0!==t&&t,a=e.canvasElem,r=e.containerRef,u=e.options,i=e.onCanvasHasResized,o=e.artboardBounds,s=getOptions(void 0===u?{}:u),c=React.useState({height:0,width:0}),l=c[0],f=l.height,d=l.width,v=c[1],p=React.useState({height:0,width:0}),R=p[0],b=R.height,h=R.width,g=p[1],w=React.useState(!0),y=w[0],m=w[1],I=s.fitCanvasToArtboardHeight,V=s.shouldResizeCanvasToContainer,C=s.useDevicePixelRatio,O=s.customDevicePixelRatio,M=useSize(r,V),x=useDevicePixelRatio(O),E=null!=o?o:{},P=E.maxX,_=E.maxY,k=React.useCallback(function(){var e,t,n,a,u=null!=(e=null==(n=r.current)?void 0:n.clientWidth)?e:0,i=null!=(t=null==(a=r.current)?void 0:a.clientHeight)?t:0;return I&&o?{width:u,height:o.maxY/o.maxX*u}:{width:u,height:i}},[r,I,P,_]);React.useEffect(function(){if(V&&r.current&&n){var e=k(),t=e.width,u=e.height,o=!1;if(a){var c=t!==d||u!==f;if(s.fitCanvasToArtboardHeight&&c&&(r.current.style.height=u+"px",o=!0),s.useDevicePixelRatio){var l=t*x!==h||u*x!==b;if(c||l){var p=x*t,R=x*u;a.width=p,a.height=R,a.style.width=t+"px",a.style.height=u+"px",g({width:p,height:R}),o=!0}}else c&&(a.width=t,a.height=u,g({width:t,height:u}),o=!0);v({width:t,height:u})}i&&(y||o)&&i&&i(),y&&m(!1)}},[a,r,M,x,k,y,m,b,h,f,d,i,V,I,C,n]),React.useEffect(function(){g({width:0,height:0})},[a])}var FakeIntersectionObserver=/*#__PURE__*/function(){function e(){}var t=e.prototype;return t.observe=function(){},t.unobserve=function(){},t.disconnect=function(){},e}(),MyIntersectionObserver=globalThis.IntersectionObserver||FakeIntersectionObserver,ElementObserver=/*#__PURE__*/function(){function e(){var e=this;this.elementsMap=new Map,this.onObserved=function(t){t.forEach(function(t){var n=e.elementsMap.get(t.target);n&&n(t)})},this.observer=new MyIntersectionObserver(this.onObserved)}var t=e.prototype;return t.registerCallback=function(e,t){this.observer.observe(e),this.elementsMap.set(e,t)},t.removeCallback=function(e){this.observer.unobserve(e),this.elementsMap.delete(e)},e}(),getObserver=function(){return observer||(observer=new ElementObserver),observer};function useIntersectionObserver(){return{observe:React.useCallback(function(e,t){getObserver().registerCallback(e,t)},[]),unobserve:React.useCallback(function(e){getObserver().removeCallback(e)},[])}}function _extends$1(){return(_extends$1=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function _object_without_properties_loose$1(e,t){if(null==e)return{};var n,a,r={},u=Object.getOwnPropertyNames(e);for(a=0;a<u.length;a++)n=u[a],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}function RiveComponent(e){var t=e.setContainerRef,n=e.setCanvasRef,a=e.className,r=void 0===a?"":a,u=e.style,i=e.children,o=_object_without_properties_loose$1(e,["setContainerRef","setCanvasRef","className","style","children"]),s=_extends$1({width:"100%",height:"100%"},u);return /*#__PURE__*/React__default.default.createElement("div",_extends$1({ref:t,className:r},!r&&{style:s}),/*#__PURE__*/React__default.default.createElement("canvas",_extends$1({ref:n,style:{verticalAlign:"top",width:0,height:0}},o),i))}function useRive(e,t){void 0===t&&(t={});var n=React.useState(null),a=n[0],r=n[1],u=React.useRef(null),i=React.useRef(null),o=React.useState(null),s=o[0],c=o[1],l=!!e,f=getOptions(t),d=useDevicePixelRatio(),v=React.useCallback(function(){if(s){if(s.layout&&s.layout.fit===canvas.Fit.Layout&&a){var e=d*s.layout.layoutScaleFactor;s.devicePixelRatioUsed=d,s.artboardWidth=(null==a?void 0:a.width)/e,s.artboardHeight=(null==a?void 0:a.height)/e}s.startRendering(),s.resizeToCanvas()}},[s,d]);useResizeCanvas({riveLoaded:!!s,canvasElem:a,containerRef:u,options:f,onCanvasHasResized:v,artboardBounds:null==s?void 0:s.bounds});var p=React.useCallback(function(e){null===e&&a&&(a.height=0,a.width=0),r(e)},[]);React.useEffect(function(){if(a&&e){var t,n=null!=s;if(null==s){var r=f.useOffscreenRenderer,u=e.onRiveReady,o=_object_without_properties_loose$1(e,["onRiveReady"]);t=new canvas.Rive(_extends$1({useOffscreenRenderer:r},o,{canvas:a})),null!=i.current&&i.current.cleanup(),i.current=t,t.on(canvas.EventType.Load,function(){n=!0,u&&u(t),a?c(t):t.cleanup()})}return function(){n||null==t||t.cleanup()}}},[a,l,s]);var R=React.useCallback(function(e){u.current=e},[]),b=useIntersectionObserver(),h=b.observe,g=b.unobserve;React.useEffect(function(){var e,t=!1,n=function(){if(a&&t){var e=a.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==s||s.startRendering(),t=!1)}};return a&&!1!==f.shouldUseIntersectionObserver&&h(a,function(a){a.isIntersecting?s&&s.startRendering():s&&s.stopRendering(),t=!a.isIntersecting,clearTimeout(e),a.isIntersecting||0!==a.boundingClientRect.width||(e=setTimeout(n,10))}),function(){a&&g(a)}},[h,g,s,a,f.shouldUseIntersectionObserver]),React.useEffect(function(){return function(){s&&(s.cleanup(),c(null))}},[s,a]),React.useEffect(function(){return function(){null!=i.current&&i.current.cleanup()}},[]);var w=null==e?void 0:e.animations;React.useEffect(function(){s&&w&&(s.isPlaying?(s.stop(s.animationNames),s.play(w)):s.isPaused&&(s.stop(s.animationNames),s.pause(w)))},[w,s]);var y=React.useCallback(function(e){return /*#__PURE__*/React__default.default.createElement(RiveComponent,_extends$1({setContainerRef:R,setCanvasRef:p},e))},[p,R]);return{canvas:a,container:u.current,setCanvasRef:p,setContainerRef:R,rive:s,RiveComponent:y}}function _object_without_properties_loose(e,t){if(null==e)return{};var n,a,r={},u=Object.getOwnPropertyNames(e);for(a=0;a<u.length;a++)n=u[a],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}var Rive=function(e){var t=e.src,n=e.artboard,a=e.animations,r=e.stateMachines,u=e.layout,i=e.useOffscreenRenderer,o=e.shouldDisableRiveListeners,s=e.shouldResizeCanvasToContainer,c=e.automaticallyHandleEvents,l=e.children,f=_object_without_properties_loose(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),d=useRive({src:t,artboard:n,animations:a,layout:u,stateMachines:r,autoplay:!0,shouldDisableRiveListeners:void 0!==o&&o,automaticallyHandleEvents:void 0!==c&&c},{useOffscreenRenderer:void 0===i||i,shouldResizeCanvasToContainer:void 0===s||s}).RiveComponent;return /*#__PURE__*/React__default.default.createElement(d,f,l)};function useStateMachineInput(e,t,n,a){var r=React.useState(null),u=r[0],i=r[1];return React.useEffect(function(){var r=function(){if(e&&t&&n||i(null),e&&t&&n){var r=e.stateMachineInputs(t);if(r){var u=r.find(function(e){return e.name===n});void 0!==a&&u&&(u.value=a),i(u||null)}}else i(null)};r(),e&&e.on(canvas.EventType.Load,function(){r()})},[e]),u}function useViewModel(e,t){var n=null!=t?t:{},a=n.name,r=n.useDefault,u=React.useState(null),i=u[0],o=u[1];return React.useEffect(function(){var t=function(){if(!e)return void o(null);var t=null;o(t=null!=a?(null==e.viewModelByName?void 0:e.viewModelByName.call(e,a))||null:e.defaultViewModel()||null)};return t(),e&&e.on(canvas.EventType.Load,t),function(){e&&e.off(canvas.EventType.Load,t)}},[e,a,void 0!==r&&r]),i}function useViewModelInstance(e,t){var n=null!=t?t:{},a=n.name,r=n.useDefault,u=void 0!==r&&r,i=n.useNew,o=void 0!==i&&i,s=n.rive,c=React.useState(null),l=c[0],f=c[1];return React.useEffect(function(){if(!e)return void f(null);var t=null;f(t=null!=a?e.instanceByName(a)||null:u?(null==e.defaultInstance?void 0:e.defaultInstance.call(e))||null:o?(null==e.instance?void 0:e.instance.call(e))||null:(null==e.defaultInstance?void 0:e.defaultInstance.call(e))||null),s&&t&&s.viewModelInstance!==t&&s.bindViewModelInstance(t)},[e,a,u,o,s]),l}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function useViewModelInstanceProperty(e,t,n){var a=React.useState(null),r=a[0],u=a[1],i=React.useState(n.defaultValue),o=i[0],s=i[1],c=React.useState(null),l=c[0],f=c[1],d=React.useRef(null),v=React.useRef(e),p=React.useRef(n);React.useEffect(function(){p.current=n},[n]);var R=React.useCallback(function(){var e=d.current,t=v.current,n=p.current;if(!e||!t)return u(null),s(n.defaultValue),f(null),function(){};var a=n.getProperty(e,t);if(a){u(a),s(n.getValue(a)),n.getExtendedData&&f(n.getExtendedData(a));var r=function(){s(n.getValue(a)),n.getExtendedData&&f(n.getExtendedData(a)),n.onPropertyEvent&&n.onPropertyEvent()};return a.on(r),function(){a.off(r)}}return function(){}},[]);React.useEffect(function(){return d.current=t,v.current=e,R()},[t,e,R]);var b=React.useCallback(function(e){if(r&&d.current===t)try{e(r),p.current.getExtendedData&&f(p.current.getExtendedData(r));return}catch(e){}if(d.current)try{var n=p.current.getProperty(d.current,v.current);n&&(u(n),e(n),p.current.getExtendedData&&f(p.current.getExtendedData(n)))}catch(e){}},[r,t]),h=React.useMemo(function(){return p.current.buildPropertyOperations(b)},[b]),g=_extends({value:o},h);return n.getExtendedData&&(g.extendedData=l),g}function useViewModelInstanceNumber(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.number(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceString(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.string(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceBoolean(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.boolean(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceColor(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.color(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})},setRgb:function(t,n,a){e(function(e){e.rgb(t,n,a)})},setRgba:function(t,n,a,r){e(function(e){e.rgba(t,n,a,r)})},setAlpha:function(t){e(function(e){e.alpha(t)})},setOpacity:function(t){e(function(e){e.opacity(t)})}}},[])});return{value:n.value,setValue:n.setValue,setRgb:n.setRgb,setRgba:n.setRgba,setAlpha:n.setAlpha,setOpacity:n.setOpacity}}function useViewModelInstanceEnum(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.enum(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,getExtendedData:React.useCallback(function(e){return e.values},[]),buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,values:n.extendedData||[],setValue:n.setValue}}function useViewModelInstanceTrigger(e,t,n){var a=(null!=n?n:{}).onTrigger;return{trigger:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.trigger(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,onPropertyEvent:a,buildPropertyOperations:React.useCallback(function(e){return{trigger:function(){e(function(e){e.trigger()})}}},[])}).trigger}}function useViewModelInstanceImage(e,t){return{setValue:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.image(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])}).setValue}}function useViewModelInstanceList(e,t){var n,a=React.useState(0)[1],r=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.list(t)},[]),getValue:React.useCallback(function(e){return e.length},[]),defaultValue:null,onPropertyEvent:function(){a(function(e){return e+1})},buildPropertyOperations:React.useCallback(function(e){return{addInstance:function(t){e(function(e){return e.addInstance(t)})},addInstanceAt:function(t,n){var a=!1;return e(function(e){a=e.addInstanceAt(t,n)}),a},removeInstance:function(t){e(function(e){return e.removeInstance(t)})},removeInstanceAt:function(t){e(function(e){return e.removeInstanceAt(t)})},getInstanceAt:function(t){var n=null;return e(function(e){n=e.instanceAt(t)}),n},swap:function(t,n){e(function(e){return e.swap(t,n)})}}},[])});return{length:null!=(n=r.value)?n:0,addInstance:r.addInstance,addInstanceAt:r.addInstanceAt,removeInstance:r.removeInstance,removeInstanceAt:r.removeInstanceAt,getInstanceAt:r.getInstanceAt,swap:r.swap}}function asyncGeneratorStep(e,t,n,a,r,u,i){try{var o=e[u](i),s=o.value}catch(e){n(e);return}o.done?t(s):Promise.resolve(s).then(a,r)}function _async_to_generator(e){return function(){var t=this,n=arguments;return new Promise(function(a,r){var u=e.apply(t,n);function i(e){asyncGeneratorStep(u,a,r,i,o,"next",e)}function o(e){asyncGeneratorStep(u,a,r,i,o,"throw",e)}i(void 0)})}}function _ts_generator(e,t){var n,a,r,u={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype),o=Object.defineProperty;return o(i,"next",{value:s(0)}),o(i,"throw",{value:s(1)}),o(i,"return",{value:s(2)}),"function"==typeof Symbol&&o(i,Symbol.iterator,{value:function(){return this}}),i;function s(o){return function(s){var c=[o,s];if(n)throw TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,a&&(r=2&c[0]?a.return:c[0]?a.throw||((r=a.return)&&r.call(a),0):a.next)&&!(r=r.call(a,c[1])).done)return r;switch(a=0,r&&(c=[2&c[0],r.value]),c[0]){case 0:case 1:r=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,a=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(r=(r=u.trys).length>0&&r[r.length-1])&&(6===c[0]||2===c[0])){u=0;continue}if(3===c[0]&&(!r||c[1]>r[0]&&c[1]<r[3])){u.label=c[1];break}if(6===c[0]&&u.label<r[1]){u.label=r[1],r=c;break}if(r&&u.label<r[2]){u.label=r[2],u.ops.push(c);break}r[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],a=0}finally{n=r=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}function useRiveFile(e){var t=React.useState(null),n=t[0],a=t[1],r=React.useState("idle"),u=r[0],i=r[1];return React.useEffect(function(){var t=null;return _async_to_generator(function(){return _ts_generator(this,function(n){try{i("loading"),(t=new canvas.RiveFile(e)).init(),t.on(canvas.EventType.Load,function(){null==t||t.getInstance(),a(t),i("success")}),t.on(canvas.EventType.LoadError,function(){i("failed")}),a(t)}catch(e){console.error(e),i("failed")}return[2]})})(),function(){null==t||t.cleanup()}},[e.src,e.buffer]),{riveFile:n,status:u}}function useViewModelInstanceArtboard(e,t){return{setValue:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.artboard(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])}).setValue}}exports.default=Rive,exports.useResizeCanvas=useResizeCanvas,exports.useRive=useRive,exports.useRiveFile=useRiveFile,exports.useStateMachineInput=useStateMachineInput,exports.useViewModel=useViewModel,exports.useViewModelInstance=useViewModelInstance,exports.useViewModelInstanceArtboard=useViewModelInstanceArtboard,exports.useViewModelInstanceBoolean=useViewModelInstanceBoolean,exports.useViewModelInstanceColor=useViewModelInstanceColor,exports.useViewModelInstanceEnum=useViewModelInstanceEnum,exports.useViewModelInstanceImage=useViewModelInstanceImage,exports.useViewModelInstanceList=useViewModelInstanceList,exports.useViewModelInstanceNumber=useViewModelInstanceNumber,exports.useViewModelInstanceString=useViewModelInstanceString,exports.useViewModelInstanceTrigger=useViewModelInstanceTrigger,Object.keys(canvas).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return canvas[e]}})});

package/dist/types/index.d.ts

@@ -1,20 +1,481 @@
-import Rive, { RiveProps } from './components/Rive';
-import useRive from './hooks/useRive';
-import useStateMachineInput from './hooks/useStateMachineInput';
-import useViewModel from './hooks/useViewModel';
-import useViewModelInstance from './hooks/useViewModelInstance';
-import useViewModelInstanceNumber from './hooks/useViewModelInstanceNumber';
-import useViewModelInstanceString from './hooks/useViewModelInstanceString';
-import useViewModelInstanceBoolean from './hooks/useViewModelInstanceBoolean';
-import useViewModelInstanceColor from './hooks/useViewModelInstanceColor';
-import useViewModelInstanceEnum from './hooks/useViewModelInstanceEnum';
-import useViewModelInstanceTrigger from './hooks/useViewModelInstanceTrigger';
-import useViewModelInstanceImage from './hooks/useViewModelInstanceImage';
-import useViewModelInstanceList from './hooks/useViewModelInstanceList';
-import useResizeCanvas from './hooks/useResizeCanvas';
-import useRiveFile from './hooks/useRiveFile';
-import useViewModelInstanceArtboard from './hooks/useViewModelInstanceArtboard';
-export default Rive;
-export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile, useViewModel, useViewModelInstance, useViewModelInstanceNumber, useViewModelInstanceString, useViewModelInstanceBoolean, useViewModelInstanceColor, useViewModelInstanceEnum, useViewModelInstanceTrigger, useViewModelInstanceImage, useViewModelInstanceList, useViewModelInstanceArtboard, RiveProps, };
-export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions, } from './types';
+import { Layout, RiveParameters, Rive as Rive$1, RiveFileParameters, RiveFile, ViewModelInstance, ViewModelInstanceArtboard, decodeImage, StateMachineInput, ViewModel, Bounds } from '@rive-app/webgl2';
 export * from '@rive-app/webgl2';
+import React, { ComponentProps, RefCallback, MutableRefObject } from 'react';
+
+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://rive.app/community/doc/layout/docBl81zd1GB 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;
+
+type UseRiveParameters = (Partial<Omit<RiveParameters, 'canvas'>> & {
+    onRiveReady?: (rive: Rive$1) => void;
+}) | null;
+type UseRiveOptions = {
+    useDevicePixelRatio: boolean;
+    customDevicePixelRatio: number;
+    fitCanvasToArtboardHeight: boolean;
+    useOffscreenRenderer: boolean;
+    shouldResizeCanvasToContainer: boolean;
+    shouldUseIntersectionObserver?: boolean;
+};
+/**
+ * @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
+ */
+type RiveState = {
+    canvas: HTMLCanvasElement | null;
+    container: HTMLElement | null;
+    setCanvasRef: RefCallback<HTMLCanvasElement>;
+    setContainerRef: RefCallback<HTMLElement>;
+    rive: Rive$1 | null;
+    RiveComponent: (props: ComponentProps<'canvas'>) => JSX.Element;
+};
+type UseRiveFileParameters = Partial<Omit<RiveFileParameters, 'onLoad' | 'onLoadError'>>;
+type FileStatus = 'idle' | 'loading' | 'failed' | 'success';
+/**
+ * @typedef RiveFileState
+ * @property data - The RiveFile instance
+ * @property status - The status of the file
+ */
+type RiveFileState = {
+    riveFile: RiveFile | null;
+    status: FileStatus;
+};
+/**
+ * Parameters for useViewModel hook.
+ *
+ * @property name - When provided, specifies the name of the ViewModel to retrieve.
+ * @property useDefault - When true, uses the default ViewModel from the Rive instance.
+ */
+type UseViewModelParameters = {
+    name: string;
+    useDefault?: never;
+} | {
+    useDefault?: boolean;
+    name?: never;
+};
+/**
+ * Parameters for useViewModelInstance hook.
+ *
+ * @property name - When provided, specifies the name of the instance to retrieve.
+ * @property useDefault - When true, uses the default instance from the ViewModel.
+ * @property useNew - When true, creates a new instance of the ViewModel.
+ * @property rive - If provided, automatically binds the instance to this Rive instance.
+ */
+type UseViewModelInstanceParameters = {
+    name: string;
+    useDefault?: never;
+    useNew?: never;
+    rive?: Rive$1 | null;
+} | {
+    useDefault?: boolean;
+    name?: never;
+    useNew?: never;
+    rive?: Rive$1 | null;
+} | {
+    useNew?: boolean;
+    name?: never;
+    useDefault?: never;
+    rive?: Rive$1 | null;
+};
+/**
+ * Parameters for interacting with trigger properties of a ViewModelInstance
+ * @property onTrigger - Callback that runs when the trigger fires
+ */
+type UseViewModelInstanceTriggerParameters = {
+    onTrigger?: () => void;
+};
+type UseViewModelInstanceNumberResult = {
+    /**
+     * The current value of the number.
+     */
+    value: number | null;
+    /**
+     * Set the value of the number.
+     * @param value - The value to set the number to.
+     */
+    setValue: (value: number) => void;
+};
+type UseViewModelInstanceStringResult = {
+    /**
+     * The current value of the string.
+     */
+    value: string | null;
+    /**
+     * Set the value of the string.
+     * @param value - The value to set the string to.
+     */
+    setValue: (value: string) => void;
+};
+type UseViewModelInstanceBooleanResult = {
+    /**
+     * The current value of the boolean.
+     */
+    value: boolean | null;
+    /**
+     * Set the value of the boolean.
+     * @param value - The value to set the boolean to.
+     */
+    setValue: (value: boolean) => void;
+};
+type UseViewModelInstanceColorResult = {
+    /**
+     * The current value of the color.
+     */
+    value: number | null;
+    /**
+     * Set the value of the color.
+     * @param value - The value to set the color to.
+     */
+    setValue: (value: number) => void;
+    /**
+     * Set the red value of the color.
+     * @param r - The red value to set the color to.
+     */
+    setRgb: (r: number, g: number, b: number) => void;
+    /**
+     * Set the red, green, blue, and alpha values of the color.
+     * @param r - The red value to set the color to.
+     * @param g - The green value to set the color to.
+     * @param b - The blue value to set the color to.
+     * @param a - The alpha value to set the color to.
+     */
+    setRgba: (r: number, g: number, b: number, a: number) => void;
+    /**
+     * Set the alpha value of the color.
+     * @param a - The alpha value to set the color to.
+     */
+    setAlpha: (a: number) => void;
+    /**
+     * Set the opacity value of the color.
+     * @param o - The opacity value to set the color to.
+     */
+    setOpacity: (o: number) => void;
+};
+type UseViewModelInstanceEnumResult = {
+    /**
+     * The current value of the enum.
+     */
+    value: string | null;
+    /**
+     * Set the value of the enum.
+     * @param value - The value to set the enum to.
+     */
+    setValue: (value: string) => void;
+    /**
+     * The values of the enum.
+     */
+    values: string[];
+};
+type UseViewModelInstanceTriggerResult = {
+    /**
+     * Fires the property trigger.
+     */
+    trigger: () => void;
+};
+type RiveRenderImage = Awaited<ReturnType<typeof decodeImage>>;
+type UseViewModelInstanceImageResult = {
+    /**
+     * Set the value of the image.
+     * @param value - The image to set.
+     */
+    setValue: (value: RiveRenderImage | null) => void;
+};
+type UseViewModelInstanceListResult = {
+    /**
+     * The current length of the list.
+     */
+    length: number;
+    /**
+     * Add an instance to the end of the list.
+     * @param instance - The ViewModelInstance to add.
+     */
+    addInstance: (instance: ViewModelInstance) => void;
+    /**
+     * Add an instance at a specific index in the list.
+     * @param instance - The ViewModelInstance to add.
+     * @param index - The index to add the instance at.
+     * @returns True if the instance was successfully added, false otherwise.
+     */
+    addInstanceAt: (instance: ViewModelInstance, index: number) => boolean;
+    /**
+     * Remove an instance from the list.
+     * @param instance - The ViewModelInstance to remove.
+     */
+    removeInstance: (instance: ViewModelInstance) => void;
+    /**
+     * Remove an instance at a specific index from the list.
+     * @param index - The index to remove the instance from.
+     */
+    removeInstanceAt: (index: number) => void;
+    /**
+     * Get an instance at a specific index from the list.
+     * @param index - The index to get the instance from.
+     * @returns The ViewModelInstance at the index, or null if not found.
+     */
+    getInstanceAt: (index: number) => ViewModelInstance | null;
+    /**
+     * Swap two instances in the list.
+     * @param a - The first index.
+     * @param b - The second index.
+     */
+    swap: (a: number, b: number) => void;
+};
+type UseViewModelInstanceArtboardResult = {
+    /**
+     * Set the value of the artboard.
+     * @param value - The artboard to set.
+     */
+    setValue: (value: ViewModelInstanceArtboard extends {
+        value: infer T;
+    } ? T : never) => void;
+};
+
+/**
+ * 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}
+ */
+declare function useRive(riveParams?: UseRiveParameters, opts?: Partial<UseRiveOptions>): RiveState;
+
+/**
+ * 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
+ */
+declare function useStateMachineInput(rive: Rive$1 | null, stateMachineName?: string, inputName?: string, initialValue?: number | boolean): StateMachineInput | null;
+
+/**
+ * Hook for fetching a ViewModel from a Rive instance.
+ *
+ * @param rive - The Rive instance to retrieve the ViewModel from
+ * @param params - Options for retrieving a ViewModel
+ * @param params.name - When provided, specifies the name of the ViewModel to retrieve
+ * @param params.useDefault - When true, uses the default ViewModel from the Rive instance
+ * @returns The ViewModel or null if not found
+ */
+declare function useViewModel(rive: Rive$1 | null, params?: UseViewModelParameters): ViewModel | null;
+
+/**
+ * Hook for fetching a ViewModelInstance from a ViewModel.
+ *
+ * @param viewModel - The ViewModel to get an instance from
+ * @param params - Options for retrieving a ViewModelInstance
+ * @param params.name - When provided, specifies the name of the instance to retrieve
+ * @param params.useDefault - When true, uses the default instance from the ViewModel
+ * @param params.useNew - When true, creates a new instance of the ViewModel
+ * @param params.rive - If provided, automatically binds the instance to this Rive instance
+ * @returns The ViewModelInstance or null if not found
+ */
+declare function useViewModelInstance(viewModel: ViewModel | null, params?: UseViewModelInstanceParameters): ViewModelInstance | null;
+
+/**
+ * Hook for interacting with number properties of a ViewModelInstance.
+ *
+ * @param params - Parameters for interacting with number properties
+ * @param params.path - Path to the number property (e.g. "speed" or "group/speed")
+ * @param params.viewModelInstance - The ViewModelInstance containing the number property
+ * @returns An object with the number value and a setter function
+ */
+declare function useViewModelInstanceNumber(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceNumberResult;
+
+/**
+ * Hook for interacting with string properties of a ViewModelInstance.
+ *
+ * @param params - Parameters for interacting with string properties
+ * @param params.path - Path to the property (e.g. "text" or "nested/text")
+ * @param params.viewModelInstance - The ViewModelInstance containing the string property
+ * @returns An object with the string value and a setter function
+ */
+declare function useViewModelInstanceString(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceStringResult;
+
+/**
+ * Hook for interacting with boolean ViewModel instance properties.
+ *
+ * @param path - The path to the boolean property
+ * @param viewModelInstance - The ViewModelInstance containing the boolean property to operate on
+ * @returns An object with the boolean value and a setter function
+ */
+declare function useViewModelInstanceBoolean(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceBooleanResult;
+
+/**
+ * Hook for interacting with color properties of a ViewModelInstance.
+ *
+ * @param path - Path to the color property
+ * @param viewModelInstance - The ViewModelInstance containing the color property
+ * @returns An object with the color value and setter functions for different color formats
+ */
+declare function useViewModelInstanceColor(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceColorResult;
+
+/**
+ * Hook for interacting with enum properties of a ViewModelInstance.
+ *
+ * @param params - Parameters for interacting with enum properties
+ * @param params.path - Path to the enum property (e.g. "state" or "group/state")
+ * @param params.viewModelInstance - The ViewModelInstance containing the enum property
+ * @returns An object with the enum value, available values, and a setter function
+ */
+declare function useViewModelInstanceEnum(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceEnumResult;
+
+/**
+ * Hook for interacting with trigger properties of a ViewModelInstance.
+ *
+ * @param params - Parameters for interacting with trigger properties
+ * @param params.path - Path to the trigger property (e.g. "onTap" or "group/onTap")
+ * @param params.viewModelInstance - The ViewModelInstance containing the trigger property
+ * @param params.onTrigger - Callback that runs when the trigger is fired
+ * @returns An object with a trigger function
+ */
+declare function useViewModelInstanceTrigger(path: string, viewModelInstance?: ViewModelInstance | null, params?: UseViewModelInstanceTriggerParameters): UseViewModelInstanceTriggerResult;
+
+/**
+ * Hook for interacting with image properties of a ViewModelInstance.
+ *
+ * @param path - Path to the image property (e.g. "profileImage" or "group/avatar")
+ * @param viewModelInstance - The ViewModelInstance containing the image property
+ * @returns An object with a setter function
+ */
+declare function useViewModelInstanceImage(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceImageResult;
+
+/**
+ * Hook for interacting with list properties of a ViewModelInstance.
+ *
+ * @param path - Path to the property (e.g. "items" or "nested/items")
+ * @param viewModelInstance - The ViewModelInstance containing the list property
+ * @returns An object with the list length and manipulation functions
+ */
+declare function useViewModelInstanceList(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceListResult;
+
+interface UseResizeCanvasProps {
+    /**
+     * Whether or not Rive is loaded and renderer is associated with the canvas
+     */
+    riveLoaded: boolean;
+    /**
+     * Ref to the canvas element
+     */
+    canvasElem: 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
+ */
+declare function useResizeCanvas({ riveLoaded, canvasElem, containerRef, options, onCanvasHasResized, artboardBounds, }: UseResizeCanvasProps): void;
+
+/**
+ * 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;
+
+/**
+ * Hook for interacting with artboard properties of a ViewModelInstance.
+ *
+ * @param path - Path to the artboard property (e.g. "targetArtboard" or "group/artboard")
+ * @param viewModelInstance - The ViewModelInstance containing the artboard property
+ * @returns An object with a setter function
+ */
+declare function useViewModelInstanceArtboard(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceArtboardResult;
+
+export { RiveProps, RiveState, UseRiveFileParameters, UseRiveOptions, UseRiveParameters, Rive as default, useResizeCanvas, useRive, useRiveFile, useStateMachineInput, useViewModel, useViewModelInstance, useViewModelInstanceArtboard, useViewModelInstanceBoolean, useViewModelInstanceColor, useViewModelInstanceEnum, useViewModelInstanceImage, useViewModelInstanceList, useViewModelInstanceNumber, useViewModelInstanceString, useViewModelInstanceTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.27.1",
+  "version": "4.27.3",
   "description": "React wrapper around the @rive-app/webgl2 library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/webgl2": "2.35.2"
+    "@rive-app/webgl2": "2.35.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"

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

@@ -1,51 +0,0 @@
-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://rive.app/community/doc/layout/docBl81zd1GB 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/elementObserver.d.ts

@@ -1,9 +0,0 @@
-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/useContainerSize.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/**
- * 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/useIntersectionObserver.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,52 +0,0 @@
-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
-     */
-    canvasElem: 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, canvasElem, containerRef, options, onCanvasHasResized, artboardBounds, }: UseResizeCanvasProps): void;
-export {};

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

@@ -1,16 +0,0 @@
-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/useRiveFile.d.ts

@@ -1,12 +0,0 @@
-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/hooks/useStateMachineInput.d.ts

@@ -1,10 +0,0 @@
-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/hooks/useViewModel.d.ts

@@ -1,12 +0,0 @@
-import { Rive, ViewModel } from '@rive-app/webgl2';
-import { UseViewModelParameters } from '../types';
-/**
- * Hook for fetching a ViewModel from a Rive instance.
- *
- * @param rive - The Rive instance to retrieve the ViewModel from
- * @param params - Options for retrieving a ViewModel
- * @param params.name - When provided, specifies the name of the ViewModel to retrieve
- * @param params.useDefault - When true, uses the default ViewModel from the Rive instance
- * @returns The ViewModel or null if not found
- */
-export default function useViewModel(rive: Rive | null, params?: UseViewModelParameters): ViewModel | null;

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

@@ -1,14 +0,0 @@
-import { ViewModel, ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceParameters } from '../types';
-/**
- * Hook for fetching a ViewModelInstance from a ViewModel.
- *
- * @param viewModel - The ViewModel to get an instance from
- * @param params - Options for retrieving a ViewModelInstance
- * @param params.name - When provided, specifies the name of the instance to retrieve
- * @param params.useDefault - When true, uses the default instance from the ViewModel
- * @param params.useNew - When true, creates a new instance of the ViewModel
- * @param params.rive - If provided, automatically binds the instance to this Rive instance
- * @returns The ViewModelInstance or null if not found
- */
-export default function useViewModelInstance(viewModel: ViewModel | null, params?: UseViewModelInstanceParameters): ViewModelInstance | null;

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

@@ -1,10 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceArtboardResult } from '../types';
-/**
- * Hook for interacting with artboard properties of a ViewModelInstance.
- *
- * @param path - Path to the artboard property (e.g. "targetArtboard" or "group/artboard")
- * @param viewModelInstance - The ViewModelInstance containing the artboard property
- * @returns An object with a setter function
- */
-export default function useViewModelInstanceArtboard(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceArtboardResult;

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

@@ -1,10 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceBooleanResult } from '../types';
-/**
- * Hook for interacting with boolean ViewModel instance properties.
- *
- * @param path - The path to the boolean property
- * @param viewModelInstance - The ViewModelInstance containing the boolean property to operate on
- * @returns An object with the boolean value and a setter function
- */
-export default function useViewModelInstanceBoolean(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceBooleanResult;

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

@@ -1,10 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceColorResult } from '../types';
-/**
- * Hook for interacting with color properties of a ViewModelInstance.
- *
- * @param path - Path to the color property
- * @param viewModelInstance - The ViewModelInstance containing the color property
- * @returns An object with the color value and setter functions for different color formats
- */
-export default function useViewModelInstanceColor(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceColorResult;

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

@@ -1,11 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceEnumResult } from '../types';
-/**
- * Hook for interacting with enum properties of a ViewModelInstance.
- *
- * @param params - Parameters for interacting with enum properties
- * @param params.path - Path to the enum property (e.g. "state" or "group/state")
- * @param params.viewModelInstance - The ViewModelInstance containing the enum property
- * @returns An object with the enum value, available values, and a setter function
- */
-export default function useViewModelInstanceEnum(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceEnumResult;

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

@@ -1,10 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceImageResult } from '../types';
-/**
- * Hook for interacting with image properties of a ViewModelInstance.
- *
- * @param path - Path to the image property (e.g. "profileImage" or "group/avatar")
- * @param viewModelInstance - The ViewModelInstance containing the image property
- * @returns An object with a setter function
- */
-export default function useViewModelInstanceImage(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceImageResult;

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

@@ -1,10 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceListResult } from '../types';
-/**
- * Hook for interacting with list properties of a ViewModelInstance.
- *
- * @param path - Path to the property (e.g. "items" or "nested/items")
- * @param viewModelInstance - The ViewModelInstance containing the list property
- * @returns An object with the list length and manipulation functions
- */
-export default function useViewModelInstanceList(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceListResult;

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

@@ -1,11 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceNumberResult } from '../types';
-/**
- * Hook for interacting with number properties of a ViewModelInstance.
- *
- * @param params - Parameters for interacting with number properties
- * @param params.path - Path to the number property (e.g. "speed" or "group/speed")
- * @param params.viewModelInstance - The ViewModelInstance containing the number property
- * @returns An object with the number value and a setter function
- */
-export default function useViewModelInstanceNumber(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceNumberResult;

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

@@ -1,40 +0,0 @@
-import { ViewModelInstance, ViewModelInstanceValue } from '@rive-app/webgl2';
-/**
- * Base hook for all ViewModelInstance property interactions.
- *
- * This hook handles the common tasks needed when working with Rive properties:
- * 1. Safely accessing properties (even during hot-reload)
- * 2. Keeping React state in sync with property changes
- * 3. Providing type safety for all operations
- *
- * @param path - Property path in the ViewModelInstance
- * @param viewModelInstance - The source ViewModelInstance
- * @param options - Configuration for working with the property
- * @returns Object with the value and operations
- */
-export declare function useViewModelInstanceProperty<P extends ViewModelInstanceValue, V, R, E = undefined>(path: string, viewModelInstance: ViewModelInstance | null | undefined, options: {
-    /** Function to get the property from a ViewModelInstance */
-    getProperty: (vm: ViewModelInstance, path: string) => P | null;
-    /** Function to get the current value from the property */
-    getValue: (prop: P) => V;
-    /** Default value to use when property is unavailable */
-    defaultValue: V | null;
-    /**
-     * Function to create the property-specific operations
-     *
-     * @param safePropertyAccess - Helper function for safely working with properties. Handles stale property references.
-     * @returns Object with operations like setValue, trigger, etc.
-     */
-    buildPropertyOperations: (safePropertyAccess: (callback: (prop: P) => void) => void) => R;
-    /** Optional callback for property events (mainly used by triggers) */
-    onPropertyEvent?: () => void;
-    /**
-     * Optional function to extract additional property data (like enum values)
-     * Returns undefined if not provided
-     */
-    getExtendedData?: (prop: P) => E;
-}): R & {
-    value: V | null;
-} & (E extends undefined ? {} : {
-    extendedData: E | null;
-});

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

@@ -1,11 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceStringResult } from '../types';
-/**
- * Hook for interacting with string properties of a ViewModelInstance.
- *
- * @param params - Parameters for interacting with string properties
- * @param params.path - Path to the property (e.g. "text" or "nested/text")
- * @param params.viewModelInstance - The ViewModelInstance containing the string property
- * @returns An object with the string value and a setter function
- */
-export default function useViewModelInstanceString(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceStringResult;

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

@@ -1,12 +0,0 @@
-import { ViewModelInstance } from '@rive-app/webgl2';
-import { UseViewModelInstanceTriggerParameters, UseViewModelInstanceTriggerResult } from '../types';
-/**
- * Hook for interacting with trigger properties of a ViewModelInstance.
- *
- * @param params - Parameters for interacting with trigger properties
- * @param params.path - Path to the trigger property (e.g. "onTap" or "group/onTap")
- * @param params.viewModelInstance - The ViewModelInstance containing the trigger property
- * @param params.onTrigger - Callback that runs when the trigger is fired
- * @returns An object with a trigger function
- */
-export default function useViewModelInstanceTrigger(path: string, viewModelInstance?: ViewModelInstance | null, params?: UseViewModelInstanceTriggerParameters): UseViewModelInstanceTriggerResult;

package/dist/types/types.d.ts

@@ -1,236 +0,0 @@
-import { type decodeImage, Rive, RiveFile, RiveFileParameters, RiveParameters, ViewModelInstance, ViewModelInstanceArtboard } from '@rive-app/webgl2';
-import { ComponentProps, RefCallback } from 'react';
-export type UseRiveParameters = (Partial<Omit<RiveParameters, 'canvas'>> & {
-    onRiveReady?: (rive: Rive) => void;
-}) | null;
-export type UseRiveOptions = {
-    useDevicePixelRatio: boolean;
-    customDevicePixelRatio: number;
-    fitCanvasToArtboardHeight: boolean;
-    useOffscreenRenderer: boolean;
-    shouldResizeCanvasToContainer: boolean;
-    shouldUseIntersectionObserver?: 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;
-};
-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;
-};
-/**
- * Parameters for useViewModel hook.
- *
- * @property name - When provided, specifies the name of the ViewModel to retrieve.
- * @property useDefault - When true, uses the default ViewModel from the Rive instance.
- */
-export type UseViewModelParameters = {
-    name: string;
-    useDefault?: never;
-} | {
-    useDefault?: boolean;
-    name?: never;
-};
-/**
- * Parameters for useViewModelInstance hook.
- *
- * @property name - When provided, specifies the name of the instance to retrieve.
- * @property useDefault - When true, uses the default instance from the ViewModel.
- * @property useNew - When true, creates a new instance of the ViewModel.
- * @property rive - If provided, automatically binds the instance to this Rive instance.
- */
-export type UseViewModelInstanceParameters = {
-    name: string;
-    useDefault?: never;
-    useNew?: never;
-    rive?: Rive | null;
-} | {
-    useDefault?: boolean;
-    name?: never;
-    useNew?: never;
-    rive?: Rive | null;
-} | {
-    useNew?: boolean;
-    name?: never;
-    useDefault?: never;
-    rive?: Rive | null;
-};
-/**
- * Parameters for interacting with trigger properties of a ViewModelInstance
- * @property onTrigger - Callback that runs when the trigger fires
- */
-export type UseViewModelInstanceTriggerParameters = {
-    onTrigger?: () => void;
-};
-export type UseViewModelInstanceNumberResult = {
-    /**
-     * The current value of the number.
-     */
-    value: number | null;
-    /**
-     * Set the value of the number.
-     * @param value - The value to set the number to.
-     */
-    setValue: (value: number) => void;
-};
-export type UseViewModelInstanceStringResult = {
-    /**
-     * The current value of the string.
-     */
-    value: string | null;
-    /**
-     * Set the value of the string.
-     * @param value - The value to set the string to.
-     */
-    setValue: (value: string) => void;
-};
-export type UseViewModelInstanceBooleanResult = {
-    /**
-     * The current value of the boolean.
-     */
-    value: boolean | null;
-    /**
-     * Set the value of the boolean.
-     * @param value - The value to set the boolean to.
-     */
-    setValue: (value: boolean) => void;
-};
-export type UseViewModelInstanceColorResult = {
-    /**
-     * The current value of the color.
-     */
-    value: number | null;
-    /**
-     * Set the value of the color.
-     * @param value - The value to set the color to.
-     */
-    setValue: (value: number) => void;
-    /**
-     * Set the red value of the color.
-     * @param r - The red value to set the color to.
-     */
-    setRgb: (r: number, g: number, b: number) => void;
-    /**
-     * Set the red, green, blue, and alpha values of the color.
-     * @param r - The red value to set the color to.
-     * @param g - The green value to set the color to.
-     * @param b - The blue value to set the color to.
-     * @param a - The alpha value to set the color to.
-     */
-    setRgba: (r: number, g: number, b: number, a: number) => void;
-    /**
-     * Set the alpha value of the color.
-     * @param a - The alpha value to set the color to.
-     */
-    setAlpha: (a: number) => void;
-    /**
-     * Set the opacity value of the color.
-     * @param o - The opacity value to set the color to.
-     */
-    setOpacity: (o: number) => void;
-};
-export type UseViewModelInstanceEnumResult = {
-    /**
-     * The current value of the enum.
-     */
-    value: string | null;
-    /**
-     * Set the value of the enum.
-     * @param value - The value to set the enum to.
-     */
-    setValue: (value: string) => void;
-    /**
-     * The values of the enum.
-     */
-    values: string[];
-};
-export type UseViewModelInstanceTriggerResult = {
-    /**
-     * Fires the property trigger.
-     */
-    trigger: () => void;
-};
-export type RiveRenderImage = Awaited<ReturnType<typeof decodeImage>>;
-export type UseViewModelInstanceImageResult = {
-    /**
-     * Set the value of the image.
-     * @param value - The image to set.
-     */
-    setValue: (value: RiveRenderImage | null) => void;
-};
-export type UseViewModelInstanceListResult = {
-    /**
-     * The current length of the list.
-     */
-    length: number;
-    /**
-     * Add an instance to the end of the list.
-     * @param instance - The ViewModelInstance to add.
-     */
-    addInstance: (instance: ViewModelInstance) => void;
-    /**
-     * Add an instance at a specific index in the list.
-     * @param instance - The ViewModelInstance to add.
-     * @param index - The index to add the instance at.
-     * @returns True if the instance was successfully added, false otherwise.
-     */
-    addInstanceAt: (instance: ViewModelInstance, index: number) => boolean;
-    /**
-     * Remove an instance from the list.
-     * @param instance - The ViewModelInstance to remove.
-     */
-    removeInstance: (instance: ViewModelInstance) => void;
-    /**
-     * Remove an instance at a specific index from the list.
-     * @param index - The index to remove the instance from.
-     */
-    removeInstanceAt: (index: number) => void;
-    /**
-     * Get an instance at a specific index from the list.
-     * @param index - The index to get the instance from.
-     * @returns The ViewModelInstance at the index, or null if not found.
-     */
-    getInstanceAt: (index: number) => ViewModelInstance | null;
-    /**
-     * Swap two instances in the list.
-     * @param a - The first index.
-     * @param b - The second index.
-     */
-    swap: (a: number, b: number) => void;
-};
-export type UseViewModelInstanceArtboardResult = {
-    /**
-     * Set the value of the artboard.
-     * @param value - The artboard to set.
-     */
-    setValue: (value: ViewModelInstanceArtboard extends {
-        value: infer T;
-    } ? T : never) => void;
-};

package/dist/types/utils.d.ts

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