Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@rive-app/react-canvas

Package Overview
Dependencies
Maintainers
4
Versions
144
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rive-app/react-canvas - npm Package Compare versions

Comparing version 3.0.17 to 3.0.18

2

dist/index.js

@@ -1,1 +0,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}var u=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}(),o=globalThis.ResizeObserver||u,s=void 0!==globalThis.ResizeObserver;function c(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 f={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function l(n,a){void 0===a&&(a={});var u=e.useRef(null),l=e.useRef(null),d=e.useState(null),v=d[0],h=d[1],p=e.useState({height:0,width:0}),g=p[0],w=p[1],y=function(t){var n=e.useState({width:0,height:0}),r=n[0],i=n[1];e.useEffect(function(){if("undefined"!=typeof window){var e=function(){i({width:window.innerWidth,height:window.innerHeight})};return s||(window.addEventListener("resize",e),e()),function(){return window.removeEventListener("resize",e)}}},[]);var a=e.useRef(new o(function(e){i({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})}));return e.useEffect(function(){var e=a.current;return t.current&&e.observe(t.current),function(){e.disconnect()}},[t,a]),r}(l),b=Boolean(n),R=function(e){return Object.assign({},f,e)}(a);function O(){if(l.current){var e=function(){var e,t,n=null!==(t=null===(e=l.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(v&&R.fitCanvasToArtboardHeight){var a=v.bounds;return{width:r,height:r*(a.maxY/a.maxX)}}return{width:r,height:i}}(),t=e.width,n=e.height,r=t!==g.width||n!==g.height;if(u.current&&v&&r){if(R.fitCanvasToArtboardHeight&&(l.current.style.height=n+"px"),R.useDevicePixelRatio){var i=window.devicePixelRatio||1;u.current.width=i*t,u.current.height=i*n,u.current.style.width=t+"px",u.current.style.height=n+"px"}else u.current.width=t,u.current.height=n;w({width:t,height:n}),v.startRendering()}v&&v.resizeToCanvas()}}e.useEffect(function(){v&&O()},[v,y]);var m=e.useCallback(function(e){if(e&&n&&b){var r=R.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){return h(a)})}else null===e&&u.current&&(u.current.height=0,u.current.width=0);u.current=e},[b]),C=e.useCallback(function(e){l.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?v&&v.startRendering():v&&v.stopRendering()});return u.current&&e.observe(u.current),function(){e.disconnect()}},[v]),e.useEffect(function(){return function(){v&&(v.stop(),h(null))}},[v]);var x=null==n?void 0:n.animations;e.useEffect(function(){v&&x&&(v.isPlaying?(v.stop(v.animationNames),v.play(x)):v.isPaused&&(v.stop(v.animationNames),v.pause(x)))},[x,v]);var E=e.useCallback(function(e){return r.default.createElement(c,i({setContainerRef:C,setCanvasRef:m},e))},[]);return{canvas:u.current,setCanvasRef:m,setContainerRef:C,rive:v,RiveComponent:E}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,o=e.stateMachines,s=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,d=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer"]),v=l({src:t,artboard:n,animations:u,layout:s,stateMachines:o,autoplay:!0},{useOffscreenRenderer:f}).RiveComponent;return r.default.createElement(v,i({},d))},exports.useRive=l,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}var u=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}(),o=globalThis.ResizeObserver||u,s=void 0!==globalThis.ResizeObserver;function c(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 f={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function l(n,a){void 0===a&&(a={});var u=e.useRef(null),l=e.useRef(null),d=e.useState(null),v=d[0],h=d[1],p=e.useState({height:0,width:0}),g=p[0],w=p[1],y=function(t){var n=e.useState({width:0,height:0}),r=n[0],i=n[1];e.useEffect(function(){if("undefined"!=typeof window){var e=function(){i({width:window.innerWidth,height:window.innerHeight})};return s||(window.addEventListener("resize",e),e()),function(){return window.removeEventListener("resize",e)}}},[]);var a=e.useRef(new o(function(e){i({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})}));return e.useEffect(function(){var e=a.current;return t.current&&e.observe(t.current),function(){e.disconnect()}},[t,a]),r}(l),b=Boolean(n),R=function(e){return Object.assign({},f,e)}(a);function O(){if(l.current){var e=function(){var e,t,n,r,i=null!==(t=null===(e=l.current)||void 0===e?void 0:e.clientWidth)&&void 0!==t?t:0,a=null!==(r=null===(n=l.current)||void 0===n?void 0:n.clientHeight)&&void 0!==r?r:0;if(v&&R.fitCanvasToArtboardHeight){var u=v.bounds;return{width:i,height:i*(u.maxY/u.maxX)}}return{width:i,height:a}}(),t=e.width,n=e.height,r=t!==g.width||n!==g.height;if(u.current&&v&&r){if(R.fitCanvasToArtboardHeight&&(l.current.style.height=n+"px"),R.useDevicePixelRatio){var i=window.devicePixelRatio||1;u.current.width=i*t,u.current.height=i*n,u.current.style.width=t+"px",u.current.style.height=n+"px"}else u.current.width=t,u.current.height=n;w({width:t,height:n}),v.startRendering()}v&&v.resizeToCanvas()}}e.useEffect(function(){v&&O()},[v,y]);var m=e.useCallback(function(e){if(e&&n&&b){var r=R.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){return h(a)})}else null===e&&u.current&&(u.current.height=0,u.current.width=0);u.current=e},[b]),C=e.useCallback(function(e){l.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?v&&v.startRendering():v&&v.stopRendering()});return u.current&&e.observe(u.current),function(){e.disconnect()}},[v]),e.useEffect(function(){return function(){v&&(v.stop(),h(null))}},[v]);var x=null==n?void 0:n.animations;e.useEffect(function(){v&&x&&(v.isPlaying?(v.stop(v.animationNames),v.play(x)):v.isPaused&&(v.stop(v.animationNames),v.pause(x)))},[x,v]);var E=e.useCallback(function(e){return r.default.createElement(c,i({setContainerRef:C,setCanvasRef:m},e))},[]);return{canvas:u.current,setCanvasRef:m,setContainerRef:C,rive:v,RiveComponent:E}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,o=e.stateMachines,s=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,d=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer"]),v=l({src:t,artboard:n,animations:u,layout:s,stateMachines:o,autoplay:!0},{useOffscreenRenderer:f}).RiveComponent;return r.default.createElement(v,i({},d))},exports.useRive=l,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]}})});
{
"name": "@rive-app/react-canvas",
"version": "3.0.17",
"version": "3.0.18",
"description": "React wrapper around the @rive-app/canvas library",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

{
"name": "@rive-app/react-canvas",
"version": "3.0.17",
"version": "3.0.18",
"description": "React wrapper around the @rive-app/canvas library",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc