@rive-app/react-webgl2 4.21.4 → 4.21.6

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 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],R=m.height,C=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!==C||n*D!==R)){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,R,C,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,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,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,i){void 0===i&&(i={});var o=e.useState(null),s=o[0],c=o[1],f=e.useRef(null),d=e.useRef(null),v=e.useState(null),h=v[0],p=v[1],y=Boolean(n),w=b(i),m=l(),R=e.useCallback(function(){if(h){if(h.layout&&h.layout.fit===t.Fit.Layout&&s){var e=m*h.layout.layoutScaleFactor;h.devicePixelRatioUsed=m,h.artboardWidth=(null==s?void 0:s.width)/e,h.artboardHeight=(null==s?void 0:s.height)/e}h.startRendering(),h.resizeToCanvas()}},[h,m]);g({riveLoaded:!!h,canvasElem:s,containerRef:f,options:w,onCanvasHasResized:R,artboardBounds:null==h?void 0:h.bounds});var x=e.useCallback(function(e){null===e&&s&&(s.height=0,s.width=0),c(e)},[]);e.useEffect(function(){if(s&&n){var e,r=null!=h;if(null==h){var i=w.useOffscreenRenderer,o=n.onRiveReady,l=a(n,["onRiveReady"]);e=new t.Rive(u(u({useOffscreenRenderer:i},l),{canvas:s})),null!=d.current&&d.current.cleanup(),d.current=e,e.on(t.EventType.Load,function(){r=!0,o&&o(e),s?p(e):e.cleanup()})}return function(){r||null==e||e.cleanup()}}},[s,y,h]);var O=e.useCallback(function(e){f.current=e},[]),V={observe:e.useCallback(function(e,t){C().registerCallback(e,t)},[]),unobserve:e.useCallback(function(e){C().removeCallback(e)},[])},k=V.observe,P=V.unobserve;e.useEffect(function(){var e,t=!1,n=function(){if(s&&t){var e=s.getBoundingClientRect();e.width>0&&e.height>0&&e.top<(window.innerHeight||document.documentElement.clientHeight)&&e.bottom>0&&e.left<(window.innerWidth||document.documentElement.clientWidth)&&e.right>0&&(null==h||h.startRendering(),t=!1)}};return s&&!1!==w.shouldUseIntersectionObserver&&k(s,function(r){r.isIntersecting?h&&h.startRendering():h&&h.stopRendering(),t=!r.isIntersecting,clearTimeout(e),r.isIntersecting||0!==r.boundingClientRect.width||(e=setTimeout(n,10))}),function(){s&&P(s)}},[k,P,h,s,w.shouldUseIntersectionObserver]),e.useEffect(function(){return function(){h&&(h.cleanup(),p(null))}},[h,s]),e.useEffect(function(){return function(){null!=d.current&&d.current.cleanup()}},[]);var M=null==n?void 0:n.animations;e.useEffect(function(){h&&M&&(h.isPlaying?(h.stop(h.animationNames),h.play(M)):h.isPaused&&(h.stop(h.animationNames),h.pause(M)))},[M,h]);var T=e.useCallback(function(e){return r.default.createElement(E,u({setContainerRef:O,setCanvasRef:x},e))},[x,O]);return{canvas:s,container:f.current,setCanvasRef:x,setContainerRef:O,rive:h,RiveComponent:T}}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]}})});
+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 h(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 p={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function b(e){return Object.assign({},p,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],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),V=x[0],O=x[1],k=f.fitCanvasToArtboardHeight,I=f.shouldResizeCanvasToContainer,P=f.useDevicePixelRatio,M=f.customDevicePixelRatio,T=h(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 k&&s?{width:u,height:u*(s.maxY/s.maxX)}:{width:u,height:i}},[a,k,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!==p;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&&(V||i)&&c&&c(),V&&O(!1)}},[u,a,T,S,z,V,O,C,R,p,g,c,I,k,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 x(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),h=v[0],p=v[1],y=Boolean(t),w=b(i),m=l(),C=e.useCallback(function(){if(h){if(h.layout&&h.layout.fit===n.Fit.Layout&&c){var e=m*h.layout.layoutScaleFactor;h.devicePixelRatioUsed=m,h.artboardWidth=(null==c?void 0:c.width)/e,h.artboardHeight=(null==c?void 0:c.height)/e}h.startRendering(),h.resizeToCanvas()}},[h,m]);g({riveLoaded:!!h,canvasElem:c,containerRef:f,options:w,onCanvasHasResized:C,artboardBounds:null==h?void 0:h.bounds});var x=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!=h;if(null==h){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?p(e):e.cleanup()})}return function(){r||null==e||e.cleanup()}}},[c,y,h]);var V=e.useCallback(function(e){f.current=e},[]),O={observe:e.useCallback(function(e,n){R().registerCallback(e,n)},[]),unobserve:e.useCallback(function(e){R().removeCallback(e)},[])},k=O.observe,I=O.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==h||h.startRendering(),n=!1)}};return c&&!1!==w.shouldUseIntersectionObserver&&k(c,function(r){r.isIntersecting?h&&h.startRendering():h&&h.stopRendering(),n=!r.isIntersecting,clearTimeout(e),r.isIntersecting||0!==r.boundingClientRect.width||(e=setTimeout(t,10))}),function(){c&&I(c)}},[k,I,h,c,w.shouldUseIntersectionObserver]),e.useEffect(function(){return function(){h&&(h.cleanup(),p(null))}},[h,c]),e.useEffect(function(){return function(){null!=d.current&&d.current.cleanup()}},[]);var P=null==t?void 0:t.animations;e.useEffect(function(){h&&P&&(h.isPlaying?(h.stop(h.animationNames),h.play(P)):h.isPaused&&(h.stop(h.animationNames),h.pause(P)))},[P,h]);var M=e.useCallback(function(e){return r.default.createElement(E,u({setContainerRef:V,setCanvasRef:x},e))},[x,V]);return{canvas:c,container:f.current,setCanvasRef:x,setContainerRef:V,rive:h,RiveComponent:M}}function V(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],h=e.useRef(null),p=e.useRef(n),b=e.useRef(r);e.useEffect(function(){b.current=r},[r]);var g=e.useCallback(function(){var e=h.current,n=p.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 h.current=t,p.current=n,g()},[t,n,g]);var y=e.useCallback(function(e){if(i&&h.current===t)try{return e(i),void(b.current.getExtendedData&&v(b.current.getExtendedData(i)))}catch(e){}if(h.current)try{var n=b.current.getProperty(h.current,p.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,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:n,artboard:t,animations:i,layout:l,stateMachines:o,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:b},{useOffscreenRenderer:s,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(w,u({},y),g)},exports.useResizeCanvas=g,exports.useRive=x,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.useViewModelInstanceBoolean=function(n,t){var r=V(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=V(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=V(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:V(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=V(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=V(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=V(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:V(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]}})});

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

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

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

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

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { Rive, RiveFile, RiveFileParameters, RiveParameters } from '@rive-app/webgl2';
+import { type decodeImage, Rive, RiveFile, RiveFileParameters, RiveParameters, ViewModelInstance } from '@rive-app/webgl2';
 import { ComponentProps, RefCallback } from 'react';
 export type UseRiveParameters = (Partial<Omit<RiveParameters, 'canvas'>> & {
     onRiveReady?: (rive: Rive) => void;
@@ -177,3 +177,51 @@ export type UseViewModelInstanceTriggerResult = {
      */
     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;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.21.4",
+  "version": "4.21.6",
   "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.30.1"
+    "@rive-app/webgl2": "2.30.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"