chore: release 4.8.3

CHANGELOG.md

@@ -4,8 +4,206 @@ 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).
 
+#### [v4.8.3](https://github.com/rive-app/rive-react/compare/v4.8.2...v4.8.3)
+
+- chore: bump rive-wasm to 2.10.3 for text bug fixes [`7a97c14`](https://github.com/rive-app/rive-react/commit/7a97c14c93422cb0d133fd2533c08af7eb81ba95)
+
+#### [v4.8.2](https://github.com/rive-app/rive-react/compare/v4.8.1...v4.8.2)
+
+> 21 February 2024
+
+- chore: release 4.8.2 [`cff7875`](https://github.com/rive-app/rive-react/commit/cff787524ddd8b9286e5322b97be2c236834d854)
+- chore: bump rive-wasm to 2.10.2 for various dependency fixes [`a34a588`](https://github.com/rive-app/rive-react/commit/a34a588ee5c47e9c16f4d66d44446a311863d5e6)
+
+#### [v4.8.1](https://github.com/rive-app/rive-react/compare/v4.8.0...v4.8.1)
+
+> 9 February 2024
+
+- chore: release 4.8.1 [`aa89f2a`](https://github.com/rive-app/rive-react/commit/aa89f2a1baf9da73f71ed74616cd87059b32df74)
+- chore: bump rive-wasm to 2.10.1 for text fix at c++ level [`39d275b`](https://github.com/rive-app/rive-react/commit/39d275b3e0ca0cd0b2f296370094fd39efe1662a)
+
+#### [v4.8.0](https://github.com/rive-app/rive-react/compare/v4.7.1...v4.8.0)
+
+> 6 February 2024
+
+- chore: release 4.8.0 [`e22acf9`](https://github.com/rive-app/rive-react/commit/e22acf98ba2b2464b3a6b6f73f518a42852a2d0e)
+- chore: bump rive-wasm dependency to 2.10.0 [`2e52e35`](https://github.com/rive-app/rive-react/commit/2e52e35ddcdb6c169fcedaf792baa3eeab52b1c7)
+
+#### [v4.7.1](https://github.com/rive-app/rive-react/compare/v4.7.0...v4.7.1)
+
+> 9 January 2024
+
+- feat: add customDevicePixelRatio param from WASM for adjusting canvas size based on dpr [`c2319b8`](https://github.com/rive-app/rive-react/commit/c2319b8dea562320966d09f54e0057a643ed7e92)
+- chore: release 4.7.1 [`f67cb24`](https://github.com/rive-app/rive-react/commit/f67cb244d2d1ebd9cf4645ca94c45875a623209c)
+
+#### [v4.7.0](https://github.com/rive-app/rive-react/compare/v4.6.2...v4.7.0)
+
+> 21 December 2023
+
+- chore: release 4.7.0 [`877e43e`](https://github.com/rive-app/rive-react/commit/877e43e354b11cfa1f774515f9d00f1c013ef2ac)
+- chore: bump rive-wasm to 2.9.0 for iOS check when creating offscreen webgl in c2d renderer [`6a033a9`](https://github.com/rive-app/rive-react/commit/6a033a99d30b85fdd6b82aada28036d3a6112054)
+
+#### [v4.6.2](https://github.com/rive-app/rive-react/compare/v4.6.1...v4.6.2)
+
+> 15 December 2023
+
+- chore: release 4.6.2 [`88f7558`](https://github.com/rive-app/rive-react/commit/88f7558ddf9172bd90bfdeb8ecc138ec81b1ca25)
+- chore: bump rive-wasm to 2.8.3 to reintroduce cleaning up of image textures [`cfe3a29`](https://github.com/rive-app/rive-react/commit/cfe3a298fba9157ecf27ccac775ae13cb3e3953b)
+
+#### [v4.6.1](https://github.com/rive-app/rive-react/compare/v4.6.0...v4.6.1)
+
+> 15 December 2023
+
+- chore: release 4.6.1 [`8e24185`](https://github.com/rive-app/rive-react/commit/8e24185f3ff7670eaa5aa93778cb53010936e6eb)
+- chore: bump rive-wasm to 2.8.2 for additional proxy gl checks before rendering an image/mesh [`5fad06d`](https://github.com/rive-app/rive-react/commit/5fad06d4bdf377a03a5f276a77b2c1037ae84474)
+
+#### [v4.6.0](https://github.com/rive-app/rive-react/compare/v4.5.8...v4.6.0)
+
+> 15 December 2023
+
+- chore: release 4.6.0 [`df14bc3`](https://github.com/rive-app/rive-react/commit/df14bc383b2a6feb08ffdd4e5557f65bbd1430ba)
+- chore: bump rive-wasm to 2.8.0 for GL as a proxy solution to checking lost context [`1196dd4`](https://github.com/rive-app/rive-react/commit/1196dd4c4e21cc9a012616fa04c02a36791336cf)
+- add webgl to 2.8.0 too [`b8dc1e5`](https://github.com/rive-app/rive-react/commit/b8dc1e53712821bf9896564e7a7c1bf562107a90)
+
+#### [v4.5.8](https://github.com/rive-app/rive-react/compare/v4.5.7...v4.5.8)
+
+> 15 December 2023
+
+- chore: release 4.5.8 [`06ceb3c`](https://github.com/rive-app/rive-react/commit/06ceb3cdb0ba497b3dda75474268c6920c99b2a9)
+- revert wasm build to 2.7.7 for testing intermediate changes before 2.7.8 [`acaa12f`](https://github.com/rive-app/rive-react/commit/acaa12f7fc7ffb6fa0ea67e0d9fe6b3680ac64f7)
+
+#### [v4.5.7](https://github.com/rive-app/rive-react/compare/v4.5.6...v4.5.7)
+
+> 14 December 2023
+
+- chore: release 4.5.7 [`0acf384`](https://github.com/rive-app/rive-react/commit/0acf384570fee3cf32e42dfe41bee0da21a252b8)
+- chore: bump rive-wasm to 2.7.8 for texture deletion check [`97a29ac`](https://github.com/rive-app/rive-react/commit/97a29acfdc25eca767a0402095708b110b496dc3)
+
+#### [v4.5.6](https://github.com/rive-app/rive-react/compare/v4.5.5...v4.5.6)
+
+> 30 November 2023
+
+- chore: release 4.5.6 [`5eb5ccf`](https://github.com/rive-app/rive-react/commit/5eb5ccfdaa2fe1e3277dbeff4fd8781b160c1ded)
+- bump rive-wasm to 2.7.6 [`edcc2c1`](https://github.com/rive-app/rive-react/commit/edcc2c1320027cc116dfa2cd1fc821b630be4403)
+
+#### [v4.5.5](https://github.com/rive-app/rive-react/compare/v4.5.4...v4.5.5)
+
+> 29 November 2023
+
+- chore: release 4.5.5 [`68d8ca4`](https://github.com/rive-app/rive-react/commit/68d8ca44fa61c94d6a5bb04a268015c71f7013d5)
+- patch: bump wasm to 2.7.5 [`ee9b83d`](https://github.com/rive-app/rive-react/commit/ee9b83d7643fc41ab422e29203d5e241a2a22d98)
+
+#### [v4.5.4](https://github.com/rive-app/rive-react/compare/v4.5.3...v4.5.4)
+
+> 21 November 2023
+
+- chore: release 4.5.4 [`187066c`](https://github.com/rive-app/rive-react/commit/187066c2cbc6240dd8cf46ea9b58ba69d98017c4)
+- chore: bump rive-wasm to 2.7.4 for bone fixes [`427d74d`](https://github.com/rive-app/rive-react/commit/427d74d14f69f557609c891f3803955c1ffcad12)
+
+#### [v4.5.3](https://github.com/rive-app/rive-react/compare/v4.5.2...v4.5.3)
+
+> 9 November 2023
+
+- chore: release 4.5.3 [`0613774`](https://github.com/rive-app/rive-react/commit/061377432e23e263404ba773ae5aca593edc696a)
+- patch: bump rive-wasm to 2.7.3 [`53d7548`](https://github.com/rive-app/rive-react/commit/53d7548b15bb445f1c34ff599597ec139e80b0d6)
+
+#### [v4.5.2](https://github.com/rive-app/rive-react/compare/v4.5.1...v4.5.2)
+
+> 8 November 2023
+
+- Add a react-canvas-lite package to build setup [`75dac6f`](https://github.com/rive-app/rive-react/commit/75dac6fe64b4904d22d986299da4c1d8a9941622)
+- chore: release 4.5.2 [`e1a4ca0`](https://github.com/rive-app/rive-react/commit/e1a4ca005828bf1750d8e6359e29ae635355bb1a)
+- Tweak copy [`83ebd67`](https://github.com/rive-app/rive-react/commit/83ebd6776da2bcaaea9c98c946f8e941575c9097)
+
+#### [v4.5.1](https://github.com/rive-app/rive-react/compare/v4.5.0...v4.5.1)
+
+> 8 November 2023
+
+- chore: release 4.5.1 [`e13c023`](https://github.com/rive-app/rive-react/commit/e13c023933b85ff0439dfbd467c39b3054699361)
+- Bump WASM dependency to 2.7.2 for nested input patch [`95183ff`](https://github.com/rive-app/rive-react/commit/95183ff8d58ed20b80979233e423663a8a66ae5e)
+
+#### [v4.5.0](https://github.com/rive-app/rive-react/compare/v4.4.0...v4.5.0)
+
+> 26 October 2023
+
+- chore: release 4.5.0 [`64416e0`](https://github.com/rive-app/rive-react/commit/64416e0b4dc8bbe82fdcd605f8ee1e705c75318d)
+- chore: bump react to 4.5.0 [`1c6837b`](https://github.com/rive-app/rive-react/commit/1c6837bf92a88eae3f80c71db67de1c19d8840e9)
+
+#### [v4.4.0](https://github.com/rive-app/rive-react/compare/v4.3.4...v4.4.0)
+
+> 6 October 2023
+
+- chore: release 4.4.0 [`15330ab`](https://github.com/rive-app/rive-react/commit/15330ababeaf49897e79fff2c731ee05612cb40e)
+- bump rive-app versions to 2.5.0 [`af70b81`](https://github.com/rive-app/rive-react/commit/af70b8150dc84cbcfeece2a018084a3d30c0288e)
+
+#### [v4.3.4](https://github.com/rive-app/rive-react/compare/v4.3.3...v4.3.4)
+
+> 3 October 2023
+
+- chore: release 4.3.4 [`a984e00`](https://github.com/rive-app/rive-react/commit/a984e007f480c1b236888a20f7d6d467eecd1dcf)
+- patch: bump rive-wasm to 2.4.4 [`04d8e01`](https://github.com/rive-app/rive-react/commit/04d8e01f87f20dc084b3de88c1e66d32cdbadeed)
+
+#### [v4.3.3](https://github.com/rive-app/rive-react/compare/v4.3.2...v4.3.3)
+
+> 20 September 2023
+
+- chore: release 4.3.3 [`44e46c5`](https://github.com/rive-app/rive-react/commit/44e46c5dee31df2f0035f00a58955d3b3a83e223)
+- chore: bump wasm to 2.4.3 for url sanitization [`323e92e`](https://github.com/rive-app/rive-react/commit/323e92e6361aa68b9a749e8466679760cc4a41a1)
+
+#### [v4.3.2](https://github.com/rive-app/rive-react/compare/v4.3.1...v4.3.2)
+
+> 19 September 2023
+
+- chore: release 4.3.2 [`a07fa02`](https://github.com/rive-app/rive-react/commit/a07fa02ed6cebe2661ccee8bd37fdcef18acc981)
+- chore: bump rive-wasm to 2.4.2 [`d710e1e`](https://github.com/rive-app/rive-react/commit/d710e1e4b24ad2eda66277eb748bdac7e9e48302)
+
+#### [v4.3.1](https://github.com/rive-app/rive-react/compare/v4.3.0...v4.3.1)
+
+> 18 September 2023
+
+- chore: release 4.3.1 [`d35e9b2`](https://github.com/rive-app/rive-react/commit/d35e9b28051ad28528142dbde1f4c5bd7a9814ab)
+- chore: bump rive-wasm to 2.4.1 for event updates [`cf44463`](https://github.com/rive-app/rive-react/commit/cf44463805e8117ee6f1ac5025b973f35f307b1c)
+
+#### [v4.3.0](https://github.com/rive-app/rive-react/compare/v4.2.1...v4.3.0)
+
+> 13 September 2023
+
+- feature: Bump WASM dependency to support Rive Events [`6ba68fa`](https://github.com/rive-app/rive-react/commit/6ba68fab9e5482a3ab2a92410ebb1b422db9ff9e)
+- chore: release 4.3.0 [`f59f446`](https://github.com/rive-app/rive-react/commit/f59f44692a9ca62c9c3f98447087647b125ada5d)
+
+#### [v4.2.1](https://github.com/rive-app/rive-react/compare/v4.2.0...v4.2.1)
+
+> 7 September 2023
+
+- chore: release 4.2.1 [`982addf`](https://github.com/rive-app/rive-react/commit/982addf163ad73a8b077c7a1a27d50bdae402260)
+- chore: bump rive-wasm to 2.3.1 for mesh fix [`dfd89c7`](https://github.com/rive-app/rive-react/commit/dfd89c769193541192718a68a8035e05caa57f07)
+
+#### [v4.2.0](https://github.com/rive-app/rive-react/compare/v4.1.6...v4.2.0)
+
+> 1 September 2023
+
+- chore: release 4.2.0 [`0247a46`](https://github.com/rive-app/rive-react/commit/0247a46c478f53499826fa40b6e03e25e833d969)
+- Updating rive wasm [`44626c7`](https://github.com/rive-app/rive-react/commit/44626c7450999abe095609b06aeafe240da8ddd5)
+
+#### [v4.1.6](https://github.com/rive-app/rive-react/compare/v4.1.5...v4.1.6)
+
+> 26 August 2023
+
+- chore: release 4.1.6 [`c0eb7d6`](https://github.com/rive-app/rive-react/commit/c0eb7d689dd96e41c19e3f647f30f8f324cf54a8)
+- chore: bump rive-wasm for follow up solo fix [`ff7a6aa`](https://github.com/rive-app/rive-react/commit/ff7a6aa6761d95ca5ea41f2d34e82a63b5e0ffee)
+
+#### [v4.1.5](https://github.com/rive-app/rive-react/compare/v4.1.4...v4.1.5)
+
+> 25 August 2023
+
+- chore: release 4.1.5 [`dc89439`](https://github.com/rive-app/rive-react/commit/dc89439d84624e44c5e1218a78bf823ed6928695)
+- chore: bump rive-wasm for follow path constraints on solos [`7ebc10a`](https://github.com/rive-app/rive-react/commit/7ebc10a4da5515ae1350edfe02ce21430de128e6)
+
 #### [v4.1.4](https://github.com/rive-app/rive-react/compare/v4.1.3...v4.1.4)
 
+> 14 August 2023
+
+- chore: release 4.1.4 [`e8e1a5b`](https://github.com/rive-app/rive-react/commit/e8e1a5bc089bbf14307d83b5ef672d74d0f23eb4)
 - chore: bump rive-wasm to 2.1.5 for follow path fix [`1bb8885`](https://github.com/rive-app/rive-react/commit/1bb8885f22583cccaa4b3b54fcbdf42c366548d3)
 
 #### [v4.1.3](https://github.com/rive-app/rive-react/compare/v4.1.2...v4.1.3)

examples/stories/StateMachineDocs.stories.mdx

@@ -1,10 +1,14 @@
 <!-- RiveTestHook.stories.mdx -->
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-import RiveComponent, { useRive, useStateMachineInput } from '../../src';
+import RiveComponent, {
+  EventType,
+  useRive,
+  useStateMachineInput,
+} from '../../src';
 import { Button } from './components/Button';
 import './rive-overview.css';
 
@@ -160,3 +164,59 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg
     }}
   </Story>
 </Canvas>
+
+## Rive Text
+
+A simple example showing Rive Text rendering. Note that if you are using the `@rive-app/react-canvas-lite` package,
+the Rive Text bit will not render on the graphic, however, the rest of the Rive content should without issue.
+
+<Canvas withSource="open">
+  <Story name="Rive Text">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const { rive, RiveComponent } = useRive({
+        src: 'text_test.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        autoplay: true,
+        automaticallyHandleEvents: true,
+      });
+      return (
+        <div className="center">
+          <RiveComponent className="base-canvas-size" />
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Rive Events
+
+To listen for Rive Events reported during state machine play, use the `on` API to add an event listener.
+
+<Canvas withSource="open">
+  <Story name="Rive Events">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const { rive, RiveComponent } = useRive({
+        src: 'rating_animation.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        autoplay: true,
+        automaticallyHandleEvents: true,
+      });
+      useEffect(() => {
+        if (rive) {
+          rive.on(EventType.RiveEvent, onRiveEventReceived);
+        }
+      }, [rive]);
+      const onRiveEventReceived = (riveEvent) => {
+        console.log('Rive Event Fired', riveEvent);
+      };
+      return (
+        <div className="center">
+          <RiveComponent className="base-canvas-size" />
+          <p>Click on the 5 star!</p>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>

npm/react-canvas-lite/README.md

@@ -0,0 +1,9 @@
+# @rive-app/react-canvas-lite
+
+Output for `rive-react` using the backing `@rive-app/canvas-lite` JS runtime.
+
+## Why Lite?
+
+The current `@rive-app/react-canvas` dependency supports all Rive features and contains the necessary backing dependencies to render those graphics. This `lite` version has the same API, but does not compile and build with certain dependencies in order to keep the package size as small as possible.
+
+At this time, this lite version of `@rive-app/react-canvas-lite` will not render [Rive Text](https://help.rive.app/editor/text) onto the canvas. Note however, that even if your Rive file may include Rive Text components when using this package, the canvas will still render the graphic without the Rive Text components.

npm/react-canvas-lite/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-canvas-lite",
+  "version": "4.8.3",
+  "description": "React wrapper around the @rive-app/canvas-lite library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/canvas-lite": "2.10.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}

npm/react-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "4.1.4",
+  "version": "4.8.3",
   "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.1.5"
+    "@rive-app/canvas": "2.10.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

npm/react-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl",
-  "version": "4.1.4",
+  "version": "4.8.3",
   "description": "React wrapper around the @rive-app/webgl 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/webgl": "2.1.5"
+    "@rive-app/webgl": "2.10.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "4.1.4",
+  "version": "4.8.3",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -36,8 +36,9 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.1.5",
-    "@rive-app/webgl": "2.1.5"
+    "@rive-app/canvas": "2.10.3",
+    "@rive-app/canvas-lite": "2.10.3",
+    "@rive-app/webgl": "2.10.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

scripts/build.sh

@@ -5,6 +5,7 @@ set -e
 # Copy the build to each react-variant build for npm release
 cp -r ./dist ./npm/react-webgl
 cp -r ./dist ./npm/react-canvas
+cp -r ./dist ./npm/react-canvas-lite
 
 echo "Replacing the canvas with webgl references in react-webgl"
 pushd ./npm/react-webgl/dist
@@ -16,3 +17,14 @@ else
   find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
 fi
 popd
+
+echo "Replacing the canvas with canvas-lite references in react-canvas-lite"
+pushd ./npm/react-canvas-lite/dist
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+else
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+fi
+popd

scripts/trimPackageJson.js

@@ -1,7 +1,8 @@
 const fs = require('fs');
 const path = process.argv[2];
 const npmPackageSplit = process.argv[3].split('-');
-const renderer = npmPackageSplit[npmPackageSplit.length - 1];
+// extracts "webgl" or "canvas-lite" from the npm package name
+const renderer = npmPackageSplit.slice(1).join('-');
 const package = require(path + '/package.json');
 
 function trimNpmPackage() {

src/components/Rive.tsx

@@ -36,6 +36,18 @@ export interface RiveProps {
    * Specify whether to resize the canvas to its container automatically
    */
   shouldResizeCanvasToContainer?: boolean;
+  /**
+   * Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
+   * functionality that can be invoked implicitly when detected.
+   *
+   * For example, if during the render loop an OpenUrlEvent is detected, the
+   * browser may try to open the specified URL in the payload.
+   *
+   * This flag is false by default to prevent any unwanted behaviors from taking place.
+   * This means any special Rive Event will have to be handled manually by subscribing to
+   * EventType.RiveEvent
+   */
+  automaticallyHandleEvents?: boolean;
 }
 
 const Rive = ({
@@ -47,6 +59,7 @@ const Rive = ({
   useOffscreenRenderer = true,
   shouldDisableRiveListeners = false,
   shouldResizeCanvasToContainer = true,
+  automaticallyHandleEvents = false,
   children,
   ...rest
 }: RiveProps & ComponentProps<'canvas'>) => {
@@ -58,6 +71,7 @@ const Rive = ({
     stateMachines,
     autoplay: true,
     shouldDisableRiveListeners,
+    automaticallyHandleEvents,
   };
 
   const options = {

src/hooks/useDevicePixelRatio.ts

@@ -7,10 +7,12 @@ import { useEffect, useState } from 'react';
  *
  * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
  *
+ * @param customDevicePixelRatio - Number to force a dpr to abide by, rather than using the window's
+ *
  * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
  */
-export default function useDevicePixelRatio() {
-  const dpr = getDevicePixelRatio();
+export default function useDevicePixelRatio(customDevicePixelRatio?: number) {
+  const dpr = customDevicePixelRatio || getDevicePixelRatio();
   const [currentDpr, setCurrentDpr] = useState(dpr);
 
   useEffect(() => {
@@ -20,7 +22,7 @@ export default function useDevicePixelRatio() {
     }
 
     const updateDpr = () => {
-      const newDpr = getDevicePixelRatio();
+      const newDpr = customDevicePixelRatio || getDevicePixelRatio();
       setCurrentDpr(newDpr);
     };
     const mediaMatcher = window.matchMedia(
@@ -35,7 +37,7 @@ export default function useDevicePixelRatio() {
         ? mediaMatcher.removeEventListener('change', updateDpr)
         : mediaMatcher.removeListener(updateDpr);
     };
-  }, [currentDpr]);
+  }, [currentDpr, customDevicePixelRatio]);
 
   return currentDpr;
 }

src/hooks/useResizeCanvas.ts

@@ -83,13 +83,14 @@ export default function useResizeCanvas({
     fitCanvasToArtboardHeight,
     shouldResizeCanvasToContainer,
     useDevicePixelRatio: shouldUseDevicePixelRatio,
+    customDevicePixelRatio,
   } = presetOptions;
 
   const containerSize = useContainerSize(
     containerRef,
     shouldResizeCanvasToContainer
   );
-  const currentDevicePixelRatio = useDevicePixelRatio();
+  const currentDevicePixelRatio = useDevicePixelRatio(customDevicePixelRatio);
 
   const { maxX, maxY } = artboardBounds ?? {};
 

src/types.ts

@@ -5,6 +5,7 @@ export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 
 export type UseRiveOptions = {
   useDevicePixelRatio: boolean;
+  customDevicePixelRatio: number;
   fitCanvasToArtboardHeight: boolean;
   useOffscreenRenderer: boolean;
   shouldResizeCanvasToContainer: boolean;

test/useRive.test.tsx

@@ -133,7 +133,7 @@ describe('useRive', () => {
     expect(cleanupMock).toBeCalled();
   });
 
-  it('sets the a bounds with the devicePixelRatio by default', async () => {
+  it('sets the bounds with the devicePixelRatio by default', async () => {
     const params = {
       src: 'file-src',
     };
@@ -166,6 +166,41 @@ describe('useRive', () => {
     expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
   });
 
+  it('sets the bounds with a specified customDevicePixelRatio if one is set', 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, { customDevicePixelRatio: 1 })
+    );
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
+    });
+
+    // Height and width should be 2* the width and height returned from containers
+    // bounding rect
+    expect(canvasSpy).toHaveAttribute('height', '100');
+    expect(canvasSpy).toHaveAttribute('width', '100');
+
+    // Style height and width should be the same as returned from containers
+    // bounding rect
+    expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
+  });
+
   it('sets the a bounds without the devicePixelRatio if useDevicePixelRatio is false', async () => {
     const params = {
       src: 'file-src',