Support listening to prefers-reduced-motion setting

CHANGELOG.md

@@ -4,9 +4,131 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v3.0.38](https://github.com/rive-app/rive-react/compare/v3.0.35...v3.0.38)
+
+- maint: bump wasm dependency for more speed on state updates [`c2977c7`](https://github.com/rive-app/rive-react/commit/c2977c705c5572480be3f253b7237bdc2d3eea35)
+
+#### [v3.0.35](https://github.com/rive-app/rive-react/compare/v3.0.34...v3.0.35)
+
+> 17 January 2023
+
+- chore: release 3.0.35 [`03f05f5`](https://github.com/rive-app/rive-react/commit/03f05f57b7f277d7d90701954b5ca09842bcaab6)
+- fix: update rive-wasm to try patching slow burn memory leak [`8b483b8`](https://github.com/rive-app/rive-react/commit/8b483b807b8207fe12c864e19f64592c0bedac46)
+
+#### [v3.0.34](https://github.com/rive-app/rive-react/compare/v3.0.33...v3.0.34)
+
+> 16 December 2022
+
+- chore: release 3.0.34 [`816fcfc`](https://github.com/rive-app/rive-react/commit/816fcfcdbcb9f2d8f83cc7887f43aae011dee3be)
+- Bumping rive-app/canvas & webgl versions. [`6c28a87`](https://github.com/rive-app/rive-react/commit/6c28a8795eeabc10aa8bdcee99ee9754d924d0ae)
+
+#### [v3.0.33](https://github.com/rive-app/rive-react/compare/v3.0.32...v3.0.33)
+
+> 8 November 2022
+
+- maint: bump wasm runtime and replace old skills rive file example [`acba24c`](https://github.com/rive-app/rive-react/commit/acba24c4ed4f703303615819678c7273c385286f)
+- chore: release 3.0.33 [`6a57630`](https://github.com/rive-app/rive-react/commit/6a57630ae67df057472a6d40f354fcfe53cb5521)
+
+#### [v3.0.32](https://github.com/rive-app/rive-react/compare/v3.0.31...v3.0.32)
+
+> 21 October 2022
+
+- chore: release 3.0.32 [`1e6eb5e`](https://github.com/rive-app/rive-react/commit/1e6eb5ec927aa0bb10ee1e7659c4824c64702f58)
+- Bumping to latest Rive WASM to fix https://2dimensions.slack.com/archives/CLLCU09T6/p1666370141425879 [`6871a81`](https://github.com/rive-app/rive-react/commit/6871a81ebd17038426e7089ed836379d02a9c5fd)
+
+#### [v3.0.31](https://github.com/rive-app/rive-react/compare/v3.0.30...v3.0.31)
+
+> 21 October 2022
+
+- chore: release 3.0.31 [`33053b3`](https://github.com/rive-app/rive-react/commit/33053b3b7f0ff6d99ce4383ecea1f031ccb587e0)
+- bump runtimes to incorporate speed fix for state machines [`4040083`](https://github.com/rive-app/rive-react/commit/4040083d5a89510356e45433e5026664baf92a49)
+
+#### [v3.0.30](https://github.com/rive-app/rive-react/compare/v3.0.29...v3.0.30)
+
+> 20 October 2022
+
+- chore: release 3.0.30 [`2153b81`](https://github.com/rive-app/rive-react/commit/2153b81e6b74d33d1e2f709291fad338dcbb85da)
+- Bump dependencies to fix call to runtime cleanup [`6b1500e`](https://github.com/rive-app/rive-react/commit/6b1500e681ba8984d786eec4d414c4c8ad4b0268)
+
+#### [v3.0.29](https://github.com/rive-app/rive-react/compare/v3.0.28...v3.0.29)
+
+> 20 October 2022
+
+- chore: release 3.0.29 [`503702c`](https://github.com/rive-app/rive-react/commit/503702cf1f963204e3519b9b3dbfea1bfa271d0a)
+- Call cleanup on unmount [`7be20b0`](https://github.com/rive-app/rive-react/commit/7be20b0a874afab7f6a29122521f42c71a22aa51)
+
+#### [v3.0.28](https://github.com/rive-app/rive-react/compare/v3.0.27...v3.0.28)
+
+> 20 October 2022
+
+- chore: release 3.0.28 [`78491f5`](https://github.com/rive-app/rive-react/commit/78491f5819b78b2e7435a2509e89fd3c672f3126)
+- Bump canvas and webgl dependencies to fix alignment memory leaks [`39edb88`](https://github.com/rive-app/rive-react/commit/39edb88a19aaff478e4e9cbeeef58414f28fdb60)
+
+#### [v3.0.27](https://github.com/rive-app/rive-react/compare/v3.0.26...v3.0.27)
+
+> 4 October 2022
+
+- chore: release 3.0.27 [`fd1a165`](https://github.com/rive-app/rive-react/commit/fd1a1653b13c2fd15f2862e6c372a27fd49acd00)
+- Fix: Bump wasm to accomodate clipping bug on nested artboards [`8d7f0ab`](https://github.com/rive-app/rive-react/commit/8d7f0ab28c8aa6af3abe5269e7b8980cc1a8dbe7)
+
+#### [v3.0.26](https://github.com/rive-app/rive-react/compare/v3.0.25...v3.0.26)
+
+> 22 September 2022
+
+- fix: Adjust canvas size if devicePixelRatio changes for any reaason [`2b1aa01`](https://github.com/rive-app/rive-react/commit/2b1aa01a87c14f71b980d160f6607edc12d3eed6)
+- chore: release 3.0.26 [`2a2e532`](https://github.com/rive-app/rive-react/commit/2a2e53256401b6d7137db4b73c5901d587a888af)
+
+#### [v3.0.25](https://github.com/rive-app/rive-react/compare/v3.0.24...v3.0.25)
+
+> 21 September 2022
+
+- chore: release 3.0.25 [`06c4e2a`](https://github.com/rive-app/rive-react/commit/06c4e2aea39d8e08ee12760663bd612ca77f3e9c)
+- patch: bump js runtime dependency to address content security policy issue in WASM build [`819bd51`](https://github.com/rive-app/rive-react/commit/819bd51ea976bbea0c218379cd88304bd1738323)
+
+#### [v3.0.24](https://github.com/rive-app/rive-react/compare/v3.0.23...v3.0.24)
+
+> 15 September 2022
+
+- add tests [`a62e9b3`](https://github.com/rive-app/rive-react/commit/a62e9b3a9aeb51b71c441ea1560eea6431704ee7)
+- chore: release 3.0.24 [`6b7f113`](https://github.com/rive-app/rive-react/commit/6b7f1132964dafe9783f0a79782a2ba20638c7ce)
+- fix: make a canvas of size 0 until we calculate the bounds appropriately [`04685c0`](https://github.com/rive-app/rive-react/commit/04685c0bcda26ee0451ab8cc9fc09436e94d04f6)
+
+#### [v3.0.23](https://github.com/rive-app/rive-react/compare/v3.0.22...v3.0.23)
+
+> 31 August 2022
+
+- chore: release 3.0.23 [`48fd9f9`](https://github.com/rive-app/rive-react/commit/48fd9f9d8048ef098ed7550e6da0d3a4eb69148e)
+- Bump runtime version to fix broken version [`3c578b7`](https://github.com/rive-app/rive-react/commit/3c578b730f82059469393522722316f2ad3a61d3)
+
+#### [v3.0.22](https://github.com/rive-app/rive-react/compare/v3.0.21...v3.0.22)
+
+> 30 August 2022
+
+- chore: release 3.0.22 [`7a46886`](https://github.com/rive-app/rive-react/commit/7a468861336861361f4fceae45616f001bf4b448)
+- Update @rive-app/canvas and @rive-app/webgl dependencies to support non node builds [`092049d`](https://github.com/rive-app/rive-react/commit/092049d20f6f955a0528831d2b5e15087328bc75)
+
+#### [v3.0.21](https://github.com/rive-app/rive-react/compare/v3.0.20...v3.0.21)
+
+> 22 July 2022
+
+- chore: release 3.0.21 [`f7aced0`](https://github.com/rive-app/rive-react/commit/f7aced03cd3c39d039cc53af54947e328fe18e83)
+- rev rive-wasm dependencies & update render delay to be 0ms [`eb07281`](https://github.com/rive-app/rive-react/commit/eb072814155bb803f6faa831caa0e0292b8f6f28)
+
+#### [v3.0.20](https://github.com/rive-app/rive-react/compare/v3.0.19...v3.0.20)
+
+> 22 July 2022
+
+- update tests [`24d8e0a`](https://github.com/rive-app/rive-react/commit/24d8e0a90795f650806064d53ae1b362e3fd332f)
+- update resize behaviour to throttle, add parameters to enable switching modes [`1092b44`](https://github.com/rive-app/rive-react/commit/1092b44947e2ac07dd38d21e8b45445256c0a59d)
+- ensure we re evaluate state machine inputs when we play is triggered, looks like there maybe additional situations where we are going to need this. [`84b18cc`](https://github.com/rive-app/rive-react/commit/84b18cc3ddf86e55b6741956ea8f86d6d21f4078)
+
 #### [v3.0.19](https://github.com/rive-app/rive-react/compare/v3.0.18...v3.0.19)
 
+> 19 July 2022
+
+- chore: release 3.0.19 [`efe28aa`](https://github.com/rive-app/rive-react/commit/efe28aa5f35f5ddde3e89085c34016ce87bb5cbb)
 - fix tests that were automatically calling the rive load callback to be more controlled [`16d836c`](https://github.com/rive-app/rive-react/commit/16d836c95928e4294b565ecb444d517653c4988b)
+- Fix: Add check before setting Rive as state variable on Rive instance load [`838ed1a`](https://github.com/rive-app/rive-react/commit/838ed1abf8aeec86ca63bfef07953424ba9cce90)
 
 #### [v3.0.18](https://github.com/rive-app/rive-react/compare/v3.0.17...v3.0.18)
 

README.md

@@ -50,7 +50,7 @@ Check out our Storybook instance that shows how to use the library in small exam
 - [Example page](https://rive-app.github.io/rive-react)
 - [Login screen w/ input tracking](https://rive-app.github.io/rive-use-cases/?path=/story/example-loginformcomponent--primary)
 - [Mouse tracking](https://codesandbox.io/s/rive-mouse-track-test-t0y965?file=/src/App.js)
-- [Accessibility concerns](https://blog.rive.app/accessible-web-animations-aria-live-regions/)
+- [Accessibility concerns](https://rive.app/blog/accesible-web-animations-aria-live-regions)
 
 ## Migration Guides
 

examples/resize-test/README.md

@@ -1,32 +0,0 @@
-# To run
-
-This is a basic showcase of a resize issue we have, to test this locally with rive-react changes
-
-1. run `npm start`
-2. run `npm run build` for the rive-react project
-
-If you want to also test local wasm changes: 
-
-1. update `rive-react`/package.json to a locally checked out version of rive-wasm's canvas_single
-`"@rive-app/canvas": "../rive-wasm/js/npm/canvas_single",`
-2. cd to `rive-wasm/js` & run `npm run dev` (keep this going as it will watch for changes)
-3. run `npm start`
-4. run `npm run build` for the rive-react project
-
-
-# Resize issue: 
-
-update parameters in `utils.ts` to see this for yourself.
-
-Resizing from window.resize
-    - bottom animation moves slower than rest
-    - cannot deal with the animations container resizing, unless its linked to the window resizing
-Resizing from ResizeObserver
-    - all animations move together super smooth when resizing
-    - top two animations flicker to white (blank canvas) when resizing
-Resizing form ResizeObserver - throttled (current default)
-    - all animations move "together"
-    - resizing looks pretty smooth, but everything lags behind a bit.
-
-# Other issues
-its also very slow resizing when dev tools is open, its fine when closed though.

examples/resize-test/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "basic-with-hook",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "file:../../node_modules/react",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "file:../..",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/resize-test/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>Rive React - Basic with Hook</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

examples/resize-test/src/App.js

@@ -1,30 +0,0 @@
-import { useRive } from 'rive-react';
-
-function App() {
-  const params = {
-    src: 'poison-loader.riv',
-    autoplay: true,
-  };
-
-  const { RiveComponent: RiveComponentBasic } = useRive(params);
-  const { RiveComponent: RiveComponentBasic2 } = useRive(params);
-  const { RiveComponent: RiveComponentBasic3 } = useRive(params);
-
-  return (
-    <>
-      <div style={{ width: '100%' }}>
-        <div style={{ height: '300px', width: '100%' }}>
-          <RiveComponentBasic />
-        </div>
-        <div style={{ height: '300px', width: '100%' }}>
-          <RiveComponentBasic2 />
-        </div>
-        <div style={{ height: '300px', width: '100%' }}>
-          <RiveComponentBasic3 />
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default App;

examples/resize-test/src/index.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);

examples/stories/RiveOverview.stories.mdx

@@ -4,8 +4,8 @@ import { useState } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-import RiveComponent, {useRive, useStateMachineInput} from '../../src';
-import {Button} from './components/Button';
+import RiveComponent, { useRive, useStateMachineInput } from '../../src';
+import { Button } from './components/Button';
 import './rive-overview.css';
 
 <Meta title="React Runtime/Overview" />
@@ -31,6 +31,7 @@ There's multiple ways to render Rive using the React runtime. See the associated
 ```tsx
 import RiveComponent from '@rive-app/react-canvas';
 ```
+
 The React runtime exports a default React component you can insert as JSX. Under the hood, it renders a `<canvas>` element that runs the animation, and a wrapping `<div>` element that handles sizing of the canvas based on the parent that wraps the component.
 
 **When to use this**: Use this for simple rendering cases where you don't need to control playback or setup state machine inputs to advance state machines. It will simply autoplay the first animation it finds in the `.riv`, the animation name you provide it, or the state machine name if you provide one.
@@ -56,12 +57,13 @@ In addition to the props laid out below, the component accepts other props that
 ### useRive Hook
 
 ```tsx
-import {useRive} from '@rive-app/react-canvas';
+import { useRive } from '@rive-app/react-canvas';
 ```
 
 The runtime also exports a named `useRive` hook that allows for more control at Rive instantiation, since it passes back a `rive` object you can use to manipulate state machines, control playback, and more.
 
 **When to use this:** When you need to control your Rive animation in any aspect, such as controlling playback, using state machine inputs to advance state machines, add adding callbacks on certain Rive-specific events such as `onStateChange`, `onPause`, etc.
+
 <Canvas withSource="open">
   <Story name="useRive Hook">
     {() => {
@@ -69,7 +71,7 @@ The runtime also exports a named `useRive` hook that allows for more control at
       const [animationText, setAnimationText] = useState('');
       const { rive, RiveComponent: RiveComponentPlayback } = useRive({
         src: 'truck.riv',
-        stateMachines: "drive",
+        stateMachines: 'drive',
         artboard: 'Truck',
         autoplay: true,
         onPause: () => {
@@ -88,15 +90,17 @@ The runtime also exports a named `useRive` hook that allows for more control at
           setIsPlaying(true);
         }
       };
-      return ((
+      return (
         <>
           <div className="center">
             <RiveComponentPlayback className="base-canvas-size" />
             <p>{animationText}</p>
-            <Button onClick={togglePlaying}>{isPlaying ? 'Pause' : 'Play'}</Button>
+            <Button onClick={togglePlaying}>
+              {isPlaying ? 'Pause' : 'Play'}
+            </Button>
           </div>
         </>
-      ));
+      );
     }}
   </Story>
 </Canvas>

examples/stories/StateMachineDocs.stories.mdx

@@ -4,8 +4,8 @@ import { useState } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-import RiveComponent, {useRive, useStateMachineInput} from '../../src';
-import {Button} from './components/Button';
+import RiveComponent, { useRive, useStateMachineInput } from '../../src';
+import { Button } from './components/Button';
 import './rive-overview.css';
 
 <Meta title="React Runtime/State Machines" />
@@ -15,6 +15,7 @@ import './rive-overview.css';
 Not familiar with Rive State Machines? Check out our [help docs](https://help.rive.app/editor/state-machine) on what these are first!
 
 The `useStateMachineInput` hook is a helper that makes grabbing references to state machine inputs easier to setup. This hook should be used along with the `useRive` hook, as you need to pass in the `rive` instance returned from `useRive`. See each of the examples below to see usage of the hook creating instance of three types of inputs:
+
 - Booleans
 - Numbers
 - Triggers
@@ -90,8 +91,8 @@ Once you grab a reference to the state machine input, you can get/set the value
 <Canvas withSource="open">
   <Story name="Number input">
     {() => {
-      const STATE_MACHINE_NAME = 'State Machine ';
-      const INPUT_NAME = 'Level';
+      const STATE_MACHINE_NAME = 'skill-controller';
+      const INPUT_NAME = 'level';
       const { rive, RiveComponent: RiveComponentTouch } = useRive({
         src: 'skills.riv',
         stateMachines: STATE_MACHINE_NAME,
@@ -101,7 +102,11 @@ Once you grab a reference to the state machine input, you can get/set the value
       // levelInput is a number state machine input. To transition the state machine,
       // we need to set the value to a number. For this state machine input, we need
       // to set to 0, 1 or 2 for a state transition to occur.
-      const levelInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME);
+      const levelInput = useStateMachineInput(
+        rive,
+        STATE_MACHINE_NAME,
+        INPUT_NAME
+      );
       return (
         // The animation will fit to the parent element, so we set a large height
         // and width for this example.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "3.0.19",
+  "version": "3.0.38",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -15,7 +15,7 @@
     "format": "prettier --write src",
     "types:check": "tsc --noEmit",
     "release": "release-it",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
     "build-storybook": "build-storybook -o docs-build"
   },
   "repository": {
@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "1.0.71",
-    "@rive-app/webgl": "1.0.68"
+    "@rive-app/canvas": "1.0.102",
+    "@rive-app/webgl": "1.0.98"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

setupTests.ts

@@ -24,6 +24,15 @@ window.IntersectionObserver = class IntersectionObserver {
   unobserve() {}
 };
 
+window.matchMedia = jest.fn().mockImplementation((query) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  dispatchEvent: jest.fn(),
+}));
+
 jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),

src/components/Rive.tsx

@@ -28,7 +28,11 @@ export interface RiveProps {
    * For `@rive-app/react-webgl`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page.
    */
   useOffscreenRenderer?: boolean;
-};
+  /**
+   * If true, the runtime will respect the users "prefers-reduced-motion" accessibilty option and start the animation paused. Defaults to false.
+   */
+  usePrefersReducedMotion?: boolean;
+}
 
 const Rive = ({
   src,
@@ -37,6 +41,7 @@ const Rive = ({
   stateMachines,
   layout,
   useOffscreenRenderer = true,
+  usePrefersReducedMotion = false,
   ...rest
 }: RiveProps & ComponentProps<'canvas'>) => {
   const params = {
@@ -50,6 +55,7 @@ const Rive = ({
 
   const options = {
     useOffscreenRenderer,
+    usePrefersReducedMotion,
   };
 
   const { RiveComponent } = useRive(params, options);

src/hooks/useRive.tsx

@@ -13,7 +13,11 @@ import {
   RiveState,
   Dimensions,
 } from '../types';
-import { useSize } from '../utils';
+import {
+  useSize,
+  useDevicePixelRatio,
+  usePrefersReducedMotion,
+} from '../utils';
 
 type RiveComponentProps = {
   setContainerRef: RefCallback<HTMLElement>;
@@ -39,7 +43,11 @@ function RiveComponent({
       className={className}
       {...(!className && { style: containerStyle })}
     >
-      <canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} {...rest} />
+      <canvas
+        ref={setCanvasRef}
+        style={{ verticalAlign: 'top', width: 0, height: 0 }}
+        {...rest}
+      />
     </div>
   );
 }
@@ -48,6 +56,7 @@ const defaultOptions = {
   useDevicePixelRatio: true,
   fitCanvasToArtboardHeight: false,
   useOffscreenRenderer: true,
+  usePrefersReducedMotion: false,
 };
 
 /**
@@ -82,7 +91,12 @@ export default function useRive(
   const containerRef = useRef<HTMLElement | null>(null);
 
   const [rive, setRive] = useState<Rive | null>(null);
-  const [dimensions, setDimensions] = useState<Dimensions>({
+  const [lastContainerDimensions, setLastContainerDimensions] =
+    useState<Dimensions>({
+      height: 0,
+      width: 0,
+    });
+  const [lastCanvasSize, setLastCanvasSize] = useState<Dimensions>({
     height: 0,
     width: 0,
   });
@@ -90,6 +104,8 @@ export default function useRive(
   // Listen to changes in the window sizes and update the bounds when changes
   // occur.
   const size = useSize(containerRef);
+  const currentDevicePixelRatio = useDevicePixelRatio();
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   const isParamsLoaded = Boolean(riveParams);
   const options = getOptions(opts);
@@ -127,23 +143,42 @@ export default function useRive(
     }
 
     const { width, height } = getCanvasDimensions();
-    const boundsChanged =
-      width !== dimensions.width || height !== dimensions.height;
-    if (canvasRef.current && rive && boundsChanged) {
-      if (options.fitCanvasToArtboardHeight) {
+    if (canvasRef.current && rive) {
+      // Check if the canvas parent container bounds have changed and set
+      // new values accordingly
+      const boundsChanged =
+        width !== lastContainerDimensions.width ||
+        height !== lastContainerDimensions.height;
+      if (options.fitCanvasToArtboardHeight && boundsChanged) {
         containerRef.current.style.height = height + 'px';
       }
       if (options.useDevicePixelRatio) {
-        const dpr = window.devicePixelRatio || 1;
-        canvasRef.current.width = dpr * width;
-        canvasRef.current.height = dpr * height;
-        canvasRef.current.style.width = width + 'px';
-        canvasRef.current.style.height = height + 'px';
-      } else {
+        // Check if devicePixelRatio may have changed and get new canvas
+        // width/height values to set the size
+        const canvasSizeChanged =
+          width * currentDevicePixelRatio !== lastCanvasSize.width ||
+          height * currentDevicePixelRatio !== lastCanvasSize.height;
+        if (boundsChanged || canvasSizeChanged) {
+          const newCanvasWidthProp = currentDevicePixelRatio * width;
+          const newCanvasHeightProp = currentDevicePixelRatio * height;
+          canvasRef.current.width = newCanvasWidthProp;
+          canvasRef.current.height = newCanvasHeightProp;
+          canvasRef.current.style.width = width + 'px';
+          canvasRef.current.style.height = height + 'px';
+          setLastCanvasSize({
+            width: newCanvasWidthProp,
+            height: newCanvasHeightProp,
+          });
+        }
+      } else if (boundsChanged) {
         canvasRef.current.width = width;
         canvasRef.current.height = height;
+        setLastCanvasSize({
+          width: width,
+          height: height,
+        });
       }
-      setDimensions({ width, height });
+      setLastContainerDimensions({ width, height });
 
       // Updating the canvas width or height will clear the canvas, so call
       // startRendering() to redraw the current frame as the animation might
@@ -167,7 +202,21 @@ export default function useRive(
     if (rive) {
       updateBounds();
     }
-  }, [rive, size]);
+  }, [rive, size, currentDevicePixelRatio]);
+
+  const animations = riveParams?.animations;
+  /**
+   * Listen to changes on the for the prefersReducedMotion accessibilty setting
+   */
+  useEffect(() => {
+    if (rive && options.usePrefersReducedMotion) {
+      if (prefersReducedMotion && rive.isPlaying) {
+        rive.pause();
+      } else if (!prefersReducedMotion && rive.isPaused) {
+        rive.play();
+      }
+    }
+  }, [rive, prefersReducedMotion]);
 
   /**
    * Ref callback called when the canvas element mounts and unmounts.
@@ -186,6 +235,9 @@ export default function useRive(
           // on an unmounted component in some rare cases
           if (canvasRef.current) {
             setRive(r);
+          } else {
+            // If unmounted, cleanup the rive object immediately
+            r.cleanup();
           }
         });
       } else if (canvas === null && canvasRef.current) {
@@ -228,12 +280,13 @@ export default function useRive(
   }, [rive]);
 
   /**
-   * On unmount, stop rive from rendering.
+   * On unmount, call cleanup to cleanup any WASM generated objects that need
+   * to be manually destroyed.
    */
   useEffect(() => {
     return () => {
       if (rive) {
-        rive.stop();
+        rive.cleanup();
         setRive(null);
       }
     };
@@ -242,7 +295,6 @@ export default function useRive(
   /**
    * Listen for changes in the animations params
    */
-  const animations = riveParams?.animations;
   useEffect(() => {
     if (rive && animations) {
       if (rive.isPlaying) {

src/types.ts

@@ -7,6 +7,7 @@ export type UseRiveOptions = {
   useDevicePixelRatio: boolean;
   fitCanvasToArtboardHeight: boolean;
   useOffscreenRenderer: boolean;
+  usePrefersReducedMotion: boolean;
 };
 
 export type Dimensions = {

src/utils.ts

@@ -12,15 +12,14 @@ function throttle(f: Function, delay: number) {
   let timer = 0;
   return function (this: Function, ...args: any) {
     clearTimeout(timer);
-    timer = setTimeout(() => f.apply(this, args), delay) as unknown as number;
+    timer = window.setTimeout(() => f.apply(this, args), delay);
   };
 }
 
 const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
 const hasResizeObserver = globalThis.ResizeObserver !== undefined;
-const preferResizeObserver = true;
-const throttleResizeObserver = true;
-const useResizeObserver = hasResizeObserver && preferResizeObserver;
+
+const useResizeObserver = hasResizeObserver;
 const useWindowListener = !useResizeObserver;
 
 export function useSize(
@@ -52,23 +51,14 @@ export function useSize(
   }, []);
   const observer = useRef(
     new MyResizeObserver(
-      throttleResizeObserver
-        ? throttle((entries: any) => {
-            if (useResizeObserver) {
-              setSize({
-                width: entries[entries.length - 1].contentRect.width,
-                height: entries[entries.length - 1].contentRect.height,
-              });
-            }
-          }, 16)
-        : (entries: any) => {
-            if (useResizeObserver) {
-              setSize({
-                width: entries[entries.length - 1].contentRect.width,
-                height: entries[entries.length - 1].contentRect.height,
-              });
-            }
-          }
+      throttle((entries: any) => {
+        if (useResizeObserver) {
+          setSize({
+            width: entries[entries.length - 1].contentRect.width,
+            height: entries[entries.length - 1].contentRect.height,
+          });
+        }
+      }, 0)
     )
   );
 
@@ -88,3 +78,75 @@ export function useSize(
 
   return size;
 }
+
+/**
+ * Listen for devicePixelRatio changes and set the new value accordingly. This could
+ * happen for reasons such as:
+ * - User moves window from retina screen display to a separate monitor
+ * - User controls zoom settings on the browser
+ *
+ * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
+ *
+ * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
+ */
+export function useDevicePixelRatio() {
+  const dpr = getDevicePixelRatio();
+  const [currentDpr, setCurrentDpr] = useState(dpr);
+
+  useEffect(() => {
+    const canListen = typeof window !== 'undefined' && 'matchMedia' in window;
+    if (!canListen) {
+      return;
+    }
+
+    const updateDpr = () => {
+      const newDpr = getDevicePixelRatio();
+      setCurrentDpr(newDpr);
+    };
+    const mediaMatcher = window.matchMedia(
+      `screen and (resolution: ${currentDpr}dppx)`
+    );
+    mediaMatcher.hasOwnProperty('addEventListener')
+      ? mediaMatcher.addEventListener('change', updateDpr)
+      : mediaMatcher.addListener(updateDpr);
+
+    return () => {
+      mediaMatcher.hasOwnProperty('removeEventListener')
+        ? mediaMatcher.removeEventListener('change', updateDpr)
+        : mediaMatcher.removeListener(updateDpr);
+    };
+  }, [currentDpr]);
+
+  return currentDpr;
+}
+
+export function getDevicePixelRatio(): number {
+  const hasDprProp =
+    typeof window !== 'undefined' &&
+    typeof window.devicePixelRatio === 'number';
+  const dpr = hasDprProp ? window.devicePixelRatio : 1;
+  return Math.min(Math.max(1, dpr), 3);
+}
+
+export function usePrefersReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    const canListen = typeof window !== 'undefined' && 'matchMedia' in window;
+    if (!canListen) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    function updatePrefersReducedMotion() {
+      setPrefersReducedMotion(() => mediaQuery.matches);
+    }
+    mediaQuery.addEventListener('change', updatePrefersReducedMotion);
+    updatePrefersReducedMotion();
+    return () =>
+      mediaQuery.removeEventListener('change', updatePrefersReducedMotion);
+  }, []);
+
+  return prefersReducedMotion;
+}

test/useRive.test.tsx

@@ -102,16 +102,16 @@ describe('useRive', () => {
     expect(resizeToCanvasMock).toBeCalled();
   });
 
-  it('stops the rive object on unmount', async () => {
+  it('calls cleanup on the rive object on unmount', async () => {
     const params = {
       src: 'file-src',
     };
 
-    const stopMock = jest.fn();
+    const cleanupMock = jest.fn();
 
     const riveMock = {
       ...baseRiveMock,
-      stop: stopMock,
+      cleanup: cleanupMock,
     };
 
     // @ts-ignore
@@ -127,7 +127,7 @@ describe('useRive', () => {
 
     unmount();
 
-    expect(stopMock).toBeCalled();
+    expect(cleanupMock).toBeCalled();
   });
 
   it('sets the a bounds with the devicePixelRatio by default', async () => {
@@ -376,4 +376,167 @@ describe('useRive', () => {
     );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
+
+  it('has a canvas size of 0 by default', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
+    });
+
+    const { RiveComponent: RiveTestComponent } = result.current;
+    const { container } = render(<RiveTestComponent />);
+    expect(container.querySelector('canvas')).toHaveStyle('width: 0');
+  });
+
+  it('sets the canvas width and height after calculating the container size', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    global.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
+    });
+
+    expect(canvasSpy).toHaveStyle('height: 100px');
+    expect(canvasSpy).toHaveStyle('width: 100px');
+  });
+
+  it('updates the canvas dimensions and size if there is a new canvas size calculation', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    window.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
+    });
+
+    expect(canvasSpy).toHaveAttribute('width', '200');
+    expect(canvasSpy).toHaveAttribute('height', '200');
+  });
+
+  it('pauses the animation if usePrefersReducedMotion is passed as true and media query returns true', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    window.matchMedia = jest.fn().mockImplementation((query) => ({
+      matches: true,
+      media: query,
+      onchange: null,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    }));
+
+    const playMock = jest.fn();
+    const pauseMock = jest.fn();
+    const stopMock = jest.fn();
+
+    const riveMock = {
+      ...baseRiveMock,
+      stop: stopMock,
+      play: playMock,
+      pause: pauseMock,
+      animationNames: ['light'],
+      isPlaying: true,
+      isPaused: false,
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => riveMock);
+    const canvasSpy = document.createElement('canvas');
+
+    const { result } = renderHook(() =>
+      useRive(params, { usePrefersReducedMotion: true })
+    );
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
+    });
+
+    expect(pauseMock).toBeCalled();
+  });
+
+  it('does not pause the animation if usePrefersReducedMotion is passed as false and media query returns true', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    window.matchMedia = jest.fn().mockImplementation((query) => ({
+      matches: true,
+      media: query,
+      onchange: null,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    }));
+
+    const playMock = jest.fn();
+    const pauseMock = jest.fn();
+    const stopMock = jest.fn();
+
+    const riveMock = {
+      ...baseRiveMock,
+      stop: stopMock,
+      play: playMock,
+      pause: pauseMock,
+      animationNames: ['light'],
+      isPlaying: true,
+      isPaused: false,
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => riveMock);
+    const canvasSpy = document.createElement('canvas');
+
+    const { result } = renderHook(() =>
+      useRive(params, { usePrefersReducedMotion: false })
+    );
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
+    });
+
+    expect(pauseMock).not.toBeCalled();
+  });
 });

test/useStateMachine.test.tsx

@@ -8,6 +8,7 @@ jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),
+    stateMachineInputs: jest.fn(),
   })),
   Layout: jest.fn(),
   Fit: {
@@ -26,6 +27,21 @@ jest.mock('@rive-app/canvas', () => ({
   },
 }));
 
+function getRiveMock({
+  smiInputs,
+}: {
+  smiInputs?: null | StateMachineInput[];
+} = {}) {
+  const riveMock = new Rive({
+    canvas: undefined as unknown as HTMLCanvasElement,
+  });
+  if (smiInputs) {
+    riveMock.stateMachineInputs = jest.fn().mockReturnValue(smiInputs);
+  }
+
+  return riveMock;
+}
+
 describe('useStateMachineInput', () => {
   it('returns null if there is null rive object passed', () => {
     const { result } = renderHook(() => useStateMachineInput(null));
@@ -33,31 +49,29 @@ describe('useStateMachineInput', () => {
   });
 
   it('returns null if there is no state machine name', () => {
-    const riveMock = {};
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock();
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, '', 'testInput')
+      useStateMachineInput(riveMock, '', 'testInput')
     );
     expect(result.current).toBeNull();
   });
 
   it('returns null if there is no state machine input name', () => {
-    const riveMock = {};
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock();
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', '')
+      useStateMachineInput(riveMock, 'smName', '')
     );
     expect(result.current).toBeNull();
   });
 
   it('returns null if there are no inputs for the state machine', () => {
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [] });
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
       useStateMachineInput(riveMock as Rive, 'smName', '')
@@ -69,14 +83,12 @@ describe('useStateMachineInput', () => {
     const smInput = {
       name: 'boolInput',
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', 'numInput')
+      useStateMachineInput(riveMock, 'smName', 'numInput')
     );
     expect(result.current).toBeNull();
   });
@@ -85,14 +97,12 @@ describe('useStateMachineInput', () => {
     const smInput = {
       name: 'boolInput',
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', 'boolInput')
+      useStateMachineInput(riveMock, 'smName', 'boolInput')
     );
     expect(result.current).toBe(smInput);
   });
@@ -102,14 +112,11 @@ describe('useStateMachineInput', () => {
       name: 'boolInput',
       value: false,
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', 'boolInput', true)
+      useStateMachineInput(riveMock, 'smName', 'boolInput', true)
     );
     expect(result.current).toStrictEqual({
       ...smInput,