@rive-app/react-canvas 3.0.3 → 3.0.6

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@rive-app/canvas");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.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 i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}function u(e){var t=e.setContainerRef,n=e.setCanvasRef,u=e.className,o=void 0===u?"":u,s=e.style,c=a(e,["setContainerRef","setCanvasRef","className","style"]),f=i({width:"100%",height:"100%"},s);return r.default.createElement("div",i({ref:t,className:o},!o&&{style:f}),r.default.createElement("canvas",i({ref:n,style:{verticalAlign:"top"}},c)))}var o={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function s(n,a){void 0===a&&(a={});var s=e.useRef(null),c=e.useRef(null),f=e.useState(null),l=f[0],d=f[1],v=e.useState({height:0,width:0}),h=v[0],p=v[1],g=function(){var t=e.useState({width:0,height:0}),n=t[0],r=t[1];return e.useEffect(function(){if("undefined"!=typeof window){var e=function(){r({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}}},[]),n}(),w=Boolean(n),y=function(e){return Object.assign({},o,e)}(a);function R(){if(c.current){var e=function(){var e,t,n=null!==(t=null===(e=c.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==t?t:new DOMRect(0,0,0,0),r=n.width,i=n.height;if(l&&y.fitCanvasToArtboardHeight){var a=l.bounds;return{width:r,height:r*(a.maxY/a.maxX)}}return{width:r,height:i}}(),t=e.width,n=e.height,r=t!==h.width||n!==h.height;if(s.current&&l&&r){if(y.fitCanvasToArtboardHeight&&(c.current.style.height=n+"px"),y.useDevicePixelRatio){var i=window.devicePixelRatio||1;s.current.width=i*t,s.current.height=i*n,s.current.style.width=t+"px",s.current.style.height=n+"px"}else s.current.width=t,s.current.height=n;p({width:t,height:n}),l.startRendering()}l&&l.resizeToCanvas()}}e.useEffect(function(){l&&R()},[l,g]);var b=e.useCallback(function(e){if(e&&n){var r=y.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){return d(a)})}else null===e&&s.current&&(s.current.height=0,s.current.width=0);s.current=e},[w]),m=e.useCallback(function(e){c.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?l&&l.startRendering():l&&l.stopRendering()});return s.current&&e.observe(s.current),function(){e.disconnect()}},[l]),e.useEffect(function(){return function(){l&&(l.stop(),d(null))}},[l]);var O=null==n?void 0:n.animations;e.useEffect(function(){l&&O&&(l.isPlaying?(l.stop(l.animationNames),l.play(O)):l.isPaused&&(l.stop(l.animationNames),l.pause(O)))},[O,l]);var C=e.useCallback(function(e){return r.default.createElement(u,i({setContainerRef:m,setCanvasRef:b},e))},[]);return{canvas:s.current,setCanvasRef:b,setContainerRef:m,rive:l,RiveComponent:C}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,o=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,l=a(e,["src","artboard","animations","layout","useOffscreenRenderer"]),d=s({src:t,artboard:n,animations:u,layout:o,autoplay:!0},{useOffscreenRenderer:f}).RiveComponent;return r.default.createElement(d,i({},l))},exports.useRive=s,exports.useStateMachineInput=function(t,n,r,i){var a=e.useState(null),u=a[0],o=a[1];return e.useEffect(function(){if(t&&n&&r||o(null),t&&n&&r){var e=t.stateMachineInputs(n);if(e){var a=e.find(function(e){return e.name===r});void 0!==i&&a&&(a.value=i),o(a||null)}}else o(null)},[t]),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/canvas");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.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 i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}function u(e){var t=e.setContainerRef,n=e.setCanvasRef,u=e.className,s=void 0===u?"":u,o=e.style,c=a(e,["setContainerRef","setCanvasRef","className","style"]),f=i({width:"100%",height:"100%"},o);return r.default.createElement("div",i({ref:t,className:s},!s&&{style:f}),r.default.createElement("canvas",i({ref:n,style:{verticalAlign:"top"}},c)))}var s={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function o(n,a){void 0===a&&(a={});var o=e.useRef(null),c=e.useRef(null),f=e.useState(null),l=f[0],d=f[1],v=e.useState({height:0,width:0}),h=v[0],p=v[1],g=function(){var t=e.useState({width:0,height:0}),n=t[0],r=t[1];return e.useEffect(function(){if("undefined"!=typeof window){var e=function(){r({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}}},[]),n}(),w=Boolean(n),y=function(e){return Object.assign({},s,e)}(a);function R(){if(c.current){var e=function(){var e,t,n=null!==(t=null===(e=c.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==t?t:new DOMRect(0,0,0,0),r=n.width,i=n.height;if(l&&y.fitCanvasToArtboardHeight){var a=l.bounds;return{width:r,height:r*(a.maxY/a.maxX)}}return{width:r,height:i}}(),t=e.width,n=e.height,r=t!==h.width||n!==h.height;if(o.current&&l&&r){if(y.fitCanvasToArtboardHeight&&(c.current.style.height=n+"px"),y.useDevicePixelRatio){var i=window.devicePixelRatio||1;o.current.width=i*t,o.current.height=i*n,o.current.style.width=t+"px",o.current.style.height=n+"px"}else o.current.width=t,o.current.height=n;p({width:t,height:n}),l.startRendering()}l&&l.resizeToCanvas()}}e.useEffect(function(){l&&R()},[l,g]);var b=e.useCallback(function(e){if(e&&n){var r=y.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){return d(a)})}else null===e&&o.current&&(o.current.height=0,o.current.width=0);o.current=e},[w]),m=e.useCallback(function(e){c.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?l&&l.startRendering():l&&l.stopRendering()});return o.current&&e.observe(o.current),function(){e.disconnect()}},[l]),e.useEffect(function(){return function(){l&&(l.stop(),d(null))}},[l]);var O=null==n?void 0:n.animations;e.useEffect(function(){l&&O&&(l.isPlaying?(l.stop(l.animationNames),l.play(O)):l.isPaused&&(l.stop(l.animationNames),l.pause(O)))},[O,l]);var C=e.useCallback(function(e){return r.default.createElement(u,i({setContainerRef:m,setCanvasRef:b},e))},[]);return{canvas:o.current,setCanvasRef:b,setContainerRef:m,rive:l,RiveComponent:C}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,s=e.stateMachines,c=e.layout,f=e.useOffscreenRenderer,l=void 0===f||f,d=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer"]),v=o({src:t,artboard:n,animations:u,layout:c,stateMachines:s,autoplay:!0},{useOffscreenRenderer:l}).RiveComponent;return r.default.createElement(v,i({},d))},exports.useRive=o,exports.useStateMachineInput=function(t,n,r,i){var a=e.useState(null),u=a[0],s=a[1];return e.useEffect(function(){if(t&&n&&r||s(null),t&&n&&r){var e=t.stateMachineInputs(n);if(e){var a=e.find(function(e){return e.name===r});void 0!==i&&a&&(a.value=i),s(a||null)}}else s(null)},[t]),u},Object.keys(t).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "3.0.3",
+  "version": "3.0.6",
   "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": "1.0.60"
+    "@rive-app/canvas": "1.0.65"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

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

@@ -4,8 +4,9 @@ export declare type RiveProps = {
     src: string;
     artboard?: string;
     animations?: string | string[];
+    stateMachines?: string | string[];
     layout?: Layout;
     useOffscreenRenderer?: boolean;
 };
-declare const Rive: ({ src, artboard, animations, layout, useOffscreenRenderer, ...rest }: RiveProps & ComponentProps<'canvas'>) => JSX.Element;
+declare const Rive: ({ src, artboard, animations, stateMachines, layout, useOffscreenRenderer, ...rest }: RiveProps & ComponentProps<'canvas'>) => JSX.Element;
 export default Rive;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "3.0.3",
+  "version": "3.0.6",
   "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": "1.0.60"
+    "@rive-app/canvas": "1.0.65"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"