@rive-app/react-canvas 4.29.4 → 4.30.0

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var observer,React=require("react"),canvas=require("@rive-app/canvas");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]}})});
+Object.defineProperty(exports,"__esModule",{value:!0});var observer,React=require("react"),canvas=require("@rive-app/canvas");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}),b=p[0],h=b.height,R=b.width,g=p[1],w=React.useState(!0),y=w[0],m=w[1],V=s.fitCanvasToArtboardHeight,I=s.shouldResizeCanvasToContainer,C=s.useDevicePixelRatio,M=s.customDevicePixelRatio,O=useSize(r,I),x=useDevicePixelRatio(M),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 V&&o?{width:u,height:o.maxY/o.maxX*u}:{width:u,height:i}},[r,V,P,_]);React.useEffect(function(){if(I&&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!==R||u*x!==h;if(c||l){var p=x*t,b=x*u;a.width=p,a.height=b,a.style.width=t+"px",a.style.height=u+"px",g({width:p,height:b}),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,O,x,k,y,m,h,R,f,d,i,I,V,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 b=React.useCallback(function(e){u.current=e},[]),h=useIntersectionObserver(),R=h.observe,g=h.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&&R(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)}},[R,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:b,setCanvasRef:p},e))},[p,b]);return{canvas:a,container:u.current,setCanvasRef:p,setContainerRef:b,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}var pendingBinds=new WeakSet;function scheduleBind(e){pendingBinds.has(e)||(pendingBinds.add(e),queueMicrotask(function(){pendingBinds.delete(e),e.bind()}))}function resolveViewModelInstance(e,t){var n=t.name,a=t.useNew,r=t.instance;return void 0!==r?r:e?null!=n?e.instanceByName(n)||null:a?(null==e.instance?void 0:e.instance.call(e))||null:(null==e.defaultInstance?void 0:e.defaultInstance.call(e))||null:null}function useViewModelInstance(e,t){var n=null!=t?t:{},a=n.name,r=n.useDefault,u=n.useNew,i=void 0!==u&&u,o=n.rive,s=React.useState(null),c=s[0],l=s[1];return React.useEffect(function(){if(!e)return void l(null);var t=resolveViewModelInstance(e,{name:a,useNew:i});l(t),o&&t&&o.viewModelInstance!==t&&(o.setViewModelInstance(t),scheduleBind(o))},[e,a,void 0!==r&&r,i,o]),c}function useGlobalViewModelInstance(e,t,n){var a=null!=n?n:{},r=a.instanceName,u=a.useNew,i=void 0!==u&&u,o=a.instance,s=a.rive,c=React.useState(null),l=c[0],f=c[1];return React.useEffect(function(){var n=resolveViewModelInstance(e,{name:r,useNew:i,instance:o});f(n),s&&t&&n&&s.setGlobalViewModelInstance(t,n)&&scheduleBind(s)},[e,t,r,i,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 b=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,b()},[t,e,b]);var h=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]),R=React.useMemo(function(){return p.current.buildPropertyOperations(h)},[h]),g=_extends({value:o},R);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.useGlobalViewModelInstance=useGlobalViewModelInstance,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

@@ -129,6 +129,32 @@ type UseViewModelInstanceParameters = {
     useDefault?: never;
     rive?: Rive$1 | null;
 };
+/**
+ * Parameters for useGlobalViewModelInstance. Selects which instance to resolve
+ * from the view model (default when none given); `rive` binds it.
+ *
+ * @property instanceName - Resolve the view model instance with this instance name.
+ * @property useNew - Create a new blank instance of the view model.
+ * @property instance - Register this caller-supplied instance directly. May be null while it loads.
+ * @property rive - Registers the instance as the global and schedules a coalesced
+ * bind. Required for the hook to register/bind anything.
+ */
+type UseGlobalViewModelInstanceParameters = {
+    instanceName: string;
+    useNew?: never;
+    instance?: never;
+    rive?: Rive$1 | null;
+} | {
+    useNew?: boolean;
+    instanceName?: never;
+    instance?: never;
+    rive?: Rive$1 | null;
+} | {
+    instance?: ViewModelInstance | null;
+    instanceName?: never;
+    useNew?: never;
+    rive?: Rive$1 | null;
+};
 /**
  * Parameters for interacting with trigger properties of a ViewModelInstance
  * @property onTrigger - Callback that runs when the trigger fires
@@ -332,6 +358,24 @@ declare function useViewModel(rive: Rive$1 | null, params?: UseViewModelParamete
  */
 declare function useViewModelInstance(viewModel: ViewModel | null, params?: UseViewModelInstanceParameters): ViewModelInstance | null;
 
+/**
+ * Creates and binds a *global* view model instance. Resolves an
+ * instance from `viewModel` — default, or `{ useNew }` / `{ instanceName }` /
+ * `{ instance }` (a caller-supplied view model instance). When
+ * `params.rive` is set, registers it as the global `name` and schedules a
+ * coalesced bind (see {@link scheduleBind}).
+ *
+ * To read an already-bound global view model instance instead, query rive directly
+ * (rive.globalViewModelInstance(name)).
+ *
+ * @param viewModel - ViewModel to resolve from (e.g. from useViewModel). May be
+ *   null while it loads, or when supplying `params.instance` directly.
+ * @param name - Name of the global view model to register under.
+ * @param params - Which instance to resolve, and the Rive instance to register with.
+ * @returns The resolved ViewModelInstance, or null if unavailable.
+ */
+declare function useGlobalViewModelInstance(viewModel: ViewModel | null, name: string, params?: UseGlobalViewModelInstanceParameters): ViewModelInstance | null;
+
 /**
  * Hook for interacting with number properties of a ViewModelInstance.
  *
@@ -478,4 +522,4 @@ declare function useRiveFile(params: UseRiveFileParameters): RiveFileState;
  */
 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 };
+export { RiveProps, RiveState, UseRiveFileParameters, UseRiveOptions, UseRiveParameters, Rive as default, useGlobalViewModelInstance, 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-canvas",
-  "version": "4.29.4",
+  "version": "4.30.0",
   "description": "React wrapper around the @rive-app/canvas 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/canvas": "2.38.4"
+    "@rive-app/canvas": "2.39.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"