@rive-app/react-webgl2 4.19.0 → 4.20.0

package/dist/index.js

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,17 @@
 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 useResizeCanvas from './hooks/useResizeCanvas';
 import useRiveFile from './hooks/useRiveFile';
 export default Rive;
-export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile, RiveProps };
-export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions } from './types';
+export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile, useViewModel, useViewModelInstance, useViewModelInstanceNumber, useViewModelInstanceString, useViewModelInstanceBoolean, useViewModelInstanceColor, useViewModelInstanceEnum, useViewModelInstanceTrigger, RiveProps, };
+export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions, } from './types';
 export * from '@rive-app/webgl2';

package/dist/types/types.d.ts

@@ -43,3 +43,135 @@ 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;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.19.0",
+  "version": "4.20.0",
   "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.27.1"
+    "@rive-app/webgl2": "2.27.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"