chore: release 4.16.6

CHANGELOG.md

@@ -4,8 +4,223 @@ 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.16.6](https://github.com/rive-app/rive-react/compare/v4.16.5...v4.16.6)
+
+- Bump rive canvas to 2.23.10 [`f0b3205`](https://github.com/rive-app/rive-react/commit/f0b32056a4488aef59f9f6b17522c61ac7f483f6)
+
+#### [v4.16.5](https://github.com/rive-app/rive-react/compare/v4.16.4...v4.16.5)
+
+> 21 November 2024
+
+- chore: release 4.16.5 [`b5dc2fa`](https://github.com/rive-app/rive-react/commit/b5dc2fa8dad4858322e1b0d626c6dd9ae949e2f9)
+- update rive canvas version [`0108d42`](https://github.com/rive-app/rive-react/commit/0108d425dd35603db9da1f1d99d0c00a5dcb86b0)
+
+#### [v4.16.4](https://github.com/rive-app/rive-react/compare/v4.16.3...v4.16.4)
+
+> 15 November 2024
+
+- chore: release 4.16.4 [`74a2714`](https://github.com/rive-app/rive-react/commit/74a27143b41773436c3e7125e8047572b5cde009)
+- bump rive canvas to 2.23.8 [`2cfb8a4`](https://github.com/rive-app/rive-react/commit/2cfb8a4955b2bc18e1895680cfcd2b305005cce1)
+
+#### [v4.16.3](https://github.com/rive-app/rive-react/compare/v4.16.2...v4.16.3)
+
+> 14 November 2024
+
+- chore: release 4.16.3 [`af6c3f8`](https://github.com/rive-app/rive-react/commit/af6c3f84c6dd4dc21731ca8457efe33a6ae1578c)
+- bump rive canvas to 2.23.7 [`351d996`](https://github.com/rive-app/rive-react/commit/351d9966b17180a1402d29ca71a1f5aef1d804ac)
+- update react to 2.23.6 [`ba73cb7`](https://github.com/rive-app/rive-react/commit/ba73cb7053a3ac729e24dc05d6e0ae272f84f12f)
+
+#### [v4.16.2](https://github.com/rive-app/rive-react/compare/v4.16.1...v4.16.2)
+
+> 12 November 2024
+
+- chore: release 4.16.2 [`4a4f8a7`](https://github.com/rive-app/rive-react/commit/4a4f8a7151dd37a0925d72897716939e75f95395)
+- updated rive canvas [`b5baef5`](https://github.com/rive-app/rive-react/commit/b5baef5ce72741df8dd970e64ae22e3f8b8da795)
+
+#### [v4.16.1](https://github.com/rive-app/rive-react/compare/v4.16.0...v4.16.1)
+
+> 5 November 2024
+
+- chore: release 4.16.1 [`79f80d3`](https://github.com/rive-app/rive-react/commit/79f80d39cd2d8f5d2fad691b765f5e27a31db9ba)
+- bump to canvas 2.23.4 [`e1ed825`](https://github.com/rive-app/rive-react/commit/e1ed8250e351f6efa19589111310021e09f7e70c)
+
+#### [v4.16.0](https://github.com/rive-app/rive-react/compare/v4.15.2...v4.16.0)
+
+> 1 November 2024
+
+- chore: release 4.16.0 [`a40ba0d`](https://github.com/rive-app/rive-react/commit/a40ba0dacc9ac0535abaa4448f904a44067a3b10)
+- chore: bump js and use public setters [`99489af`](https://github.com/rive-app/rive-react/commit/99489af287e85122c9cbe75dc6b97b393254484e)
+- chore: bump again to make type check happy [`7ea9c8f`](https://github.com/rive-app/rive-react/commit/7ea9c8fbcbaeb3910ddcc88766e7a5a1061fa89d)
+
+#### [v4.15.2](https://github.com/rive-app/rive-react/compare/v4.15.1...v4.15.2)
+
+> 30 October 2024
+
+- chore: release 4.15.2 [`2e461c6`](https://github.com/rive-app/rive-react/commit/2e461c66b37d29b05ce3a0d02547db933b7dd33f)
+- fix: account for scale factor in layout resizing [`bb07829`](https://github.com/rive-app/rive-react/commit/bb078296d0d694e5b6db0271bac52b207c5094ec)
+
+#### [v4.15.1](https://github.com/rive-app/rive-react/compare/v4.15.0...v4.15.1)
+
+> 30 October 2024
+
+- chore: release 4.15.1 [`f9bad8b`](https://github.com/rive-app/rive-react/commit/f9bad8b62d3919fdbcfd6d5f62e77d8b920d5e8e)
+- fix: additional layout configuration that react needs [`83fa663`](https://github.com/rive-app/rive-react/commit/83fa6635ec5fc51e4651f0705fdb392f84d6421d)
+- fix: only perform layout resizing if the Layout object exists [`e42f5e3`](https://github.com/rive-app/rive-react/commit/e42f5e32d7968f26008d61248b74bb6c16d74647)
+
+#### [v4.15.0](https://github.com/rive-app/rive-react/compare/v4.14.6...v4.15.0)
+
+> 30 October 2024
+
+- chore: release 4.15.0 [`bdd4c84`](https://github.com/rive-app/rive-react/commit/bdd4c84d8b32fafb775afcaded6c16ec158892bb)
+- feat: responsive layouts! [`414543d`](https://github.com/rive-app/rive-react/commit/414543d37dde248a7028d9d6a43c3c7dee3d49f6)
+
+#### [v4.14.6](https://github.com/rive-app/rive-react/compare/v4.14.5...v4.14.6)
+
+> 29 October 2024
+
+- chore: release 4.14.6 [`119f7ee`](https://github.com/rive-app/rive-react/commit/119f7eea2a7b29e79dd837c36e5c0fb37232d554)
+- rive canvas 2.21.7 [`92b0342`](https://github.com/rive-app/rive-react/commit/92b0342882ff44eb55526a43804cae2499a4bea2)
+
+#### [v4.14.5](https://github.com/rive-app/rive-react/compare/v4.14.4...v4.14.5)
+
+> 15 October 2024
+
+- chore: release 4.14.5 [`38b0a1c`](https://github.com/rive-app/rive-react/commit/38b0a1cc8638c0e1406c5cc7e3305875cb1f3c3a)
+- rive canvas 2.21.6 [`2fd87e4`](https://github.com/rive-app/rive-react/commit/2fd87e45e82a14da9576041fcdf3105187b81953)
+
+#### [v4.14.4](https://github.com/rive-app/rive-react/compare/v4.14.3...v4.14.4)
+
+> 2 October 2024
+
+- chore: release 4.14.4 [`dc99fe2`](https://github.com/rive-app/rive-react/commit/dc99fe27ccdb5697db4374c7f7617bacb17e957d)
+- update rive to 2.21.5 [`2358c82`](https://github.com/rive-app/rive-react/commit/2358c826267c16e7f6d518b4c439c951c9c4ebc9)
+
+#### [v4.14.3](https://github.com/rive-app/rive-react/compare/v4.14.2...v4.14.3)
+
+> 1 October 2024
+
+- chore: release 4.14.3 [`0475d47`](https://github.com/rive-app/rive-react/commit/0475d475356d88f9a6abc704de080b8087b1777e)
+- update rive to 2.21.4 [`f51e538`](https://github.com/rive-app/rive-react/commit/f51e53847900118c71a48cd38bd0cf69a1fea6a7)
+
+#### [v4.14.2](https://github.com/rive-app/rive-react/compare/v4.14.1...v4.14.2)
+
+> 23 September 2024
+
+- chore: release 4.14.2 [`29fa6e7`](https://github.com/rive-app/rive-react/commit/29fa6e76fb149aedfe6e88db6f543e7ce1361199)
+- bump rive canvas to 2.21.3 [`2459c48`](https://github.com/rive-app/rive-react/commit/2459c489bf62a04ff62cacb61308677b1f0cc42f)
+
+#### [v4.14.1](https://github.com/rive-app/rive-react/compare/v4.14.0...v4.14.1)
+
+> 17 September 2024
+
+- chore: release 4.14.1 [`927dbc6`](https://github.com/rive-app/rive-react/commit/927dbc6b32bfa4c7ceaf53acdb0c637db9f3a52c)
+- bump rive canvas to 2.21.1 [`8ebbfb1`](https://github.com/rive-app/rive-react/commit/8ebbfb164f0d5adfa7d45f0a5bb14af7f748c0f3)
+
+#### [v4.14.0](https://github.com/rive-app/rive-react/compare/v4.13.10...v4.14.0)
+
+> 13 September 2024
+
+- chore: release 4.14.0 [`388fd16`](https://github.com/rive-app/rive-react/commit/388fd16b5b560ba5f8872bf40067acf531de6836)
+- chore: bump rive canvas to 2.21.0 [`8c87bc0`](https://github.com/rive-app/rive-react/commit/8c87bc0ab74d726445f2fd9a90b3f904fdc3d92d)
+
+#### [v4.13.10](https://github.com/rive-app/rive-react/compare/v4.13.9...v4.13.10)
+
+> 12 September 2024
+
+- chore: release 4.13.10 [`280b2ec`](https://github.com/rive-app/rive-react/commit/280b2ec4a4a99e71aacfe1075d6be4914cc2f629)
+- bump rive canvas to 2.20.2 [`55a40c7`](https://github.com/rive-app/rive-react/commit/55a40c7d9f8cfc9fa1b14b1003deb65bdefd8f47)
+
+#### [v4.13.9](https://github.com/rive-app/rive-react/compare/v4.13.8...v4.13.9)
+
+> 10 September 2024
+
+- chore: release 4.13.9 [`d4e6243`](https://github.com/rive-app/rive-react/commit/d4e6243dbbab6b0be0454bdc69e71e95610b1dbf)
+- docs: update links [`2ae22d6`](https://github.com/rive-app/rive-react/commit/2ae22d6c3021188c3e175ebc4a0bc8a02355db26)
+- bump react canvas [`dc738d0`](https://github.com/rive-app/rive-react/commit/dc738d00a6011c9bb25ce94e5a3fe50ac12764c2)
+
+#### [v4.13.8](https://github.com/rive-app/rive-react/compare/v4.13.7...v4.13.8)
+
+> 21 August 2024
+
+- chore: release 4.13.8 [`4a3fc22`](https://github.com/rive-app/rive-react/commit/4a3fc222617b9baef46becbf1eb4ee4d6a15d4ab)
+- update rive canvas [`bdc734b`](https://github.com/rive-app/rive-react/commit/bdc734b90be82bcf4a78599ea2c63c15a6045dba)
+
+#### [v4.13.7](https://github.com/rive-app/rive-react/compare/v4.13.6...v4.13.7)
+
+> 15 August 2024
+
+- chore: release 4.13.7 [`eeda717`](https://github.com/rive-app/rive-react/commit/eeda717178a9c7ccd2be39f8d3fcd0fd2f0ef3ea)
+- update rive canvas to 2.19.8 [`178f04d`](https://github.com/rive-app/rive-react/commit/178f04df611dee34781c74fb0de61d73c37c3720)
+
+#### [v4.13.6](https://github.com/rive-app/rive-react/compare/v4.13.5...v4.13.6)
+
+> 9 August 2024
+
+- chore: release 4.13.6 [`ef11079`](https://github.com/rive-app/rive-react/commit/ef11079784b4f1b22574c04700dd9705257dbf38)
+- update rive canvas to 2.19.7 [`11f548b`](https://github.com/rive-app/rive-react/commit/11f548b21c0c462e2de111d50d70a54692af599d)
+
+#### [v4.13.5](https://github.com/rive-app/rive-react/compare/v4.13.4...v4.13.5)
+
+> 29 July 2024
+
+- chore: release 4.13.5 [`d0ff23c`](https://github.com/rive-app/rive-react/commit/d0ff23c1243121a28ad8144d28860ba0a587a16a)
+- fix: add webgl2 package to dependencies [`a83f5a2`](https://github.com/rive-app/rive-react/commit/a83f5a275af8e05a48a027d78c059aec039ef4bd)
+
+#### [v4.13.4](https://github.com/rive-app/rive-react/compare/v4.13.3...v4.13.4)
+
+> 23 July 2024
+
+- chore: release 4.13.4 [`b437230`](https://github.com/rive-app/rive-react/commit/b43723006331efb940c805cf3b4ca1b82047269f)
+- update rive version to 2.19.4 [`1091205`](https://github.com/rive-app/rive-react/commit/10912052f2bbcfec9830e8e23fa4bf7ddfa546cd)
+
+#### [v4.13.3](https://github.com/rive-app/rive-react/compare/v4.13.2...v4.13.3)
+
+> 10 July 2024
+
+- chore: release 4.13.3 [`fe8265c`](https://github.com/rive-app/rive-react/commit/fe8265cd5809193c2b52b306666430e3f84c1dcc)
+- update rive version to 2.19.3 [`5b458b7`](https://github.com/rive-app/rive-react/commit/5b458b76e5c8ffa4383d3fe89e020f95154f87fe)
+
+#### [v4.13.2](https://github.com/rive-app/rive-react/compare/v4.13.1...v4.13.2)
+
+> 5 July 2024
+
+- chore: release 4.13.2 [`1decbc7`](https://github.com/rive-app/rive-react/commit/1decbc7d85c5f225dc1def8fa09207f8db102632)
+- update rive version to 2.19.2 [`8762712`](https://github.com/rive-app/rive-react/commit/87627125f571f85a4cd71a8d7c48af1032d32747)
+
+#### [v4.13.1](https://github.com/rive-app/rive-react/compare/v4.13.0...v4.13.1)
+
+> 3 July 2024
+
+- chore: release 4.13.1 [`e823e95`](https://github.com/rive-app/rive-react/commit/e823e9519f9ffa6bb3a1e4fd8bd3b2c98f6143a6)
+- update rive version to 2.19.1 [`ac88187`](https://github.com/rive-app/rive-react/commit/ac881871189a134b821a86e25029d2db056c2bef)
+- fix: change initialization from play to load event [`1897e82`](https://github.com/rive-app/rive-react/commit/1897e823b9bd500813c96a1512d90dc3b9bbe976)
+
+#### [v4.13.0](https://github.com/rive-app/rive-react/compare/v4.12.1...v4.13.0)
+
+> 28 June 2024
+
+- chore: release 4.13.0 [`1a2e57a`](https://github.com/rive-app/rive-react/commit/1a2e57a82c391a602e72721945b93c43949ea23b)
+- update rive version to 2.19.0 [`0d16fee`](https://github.com/rive-app/rive-react/commit/0d16feeec196cb17fd44a875aa132c014aa44243)
+
+#### [v4.12.1](https://github.com/rive-app/rive-react/compare/v4.12.0...v4.12.1)
+
+> 25 June 2024
+
+- fix: catch RiveFile initialization error in hook [`9b02c0f`](https://github.com/rive-app/rive-react/commit/9b02c0f1bc7fb61e17f5d6f51da120c11e82e61a)
+- chore: release 4.12.1 [`ca48907`](https://github.com/rive-app/rive-react/commit/ca48907649a8dae636947e95afb8931e2299e5c6)
+
+#### [v4.12.0](https://github.com/rive-app/rive-react/compare/v4.11.3...v4.12.0)
+
+> 18 June 2024
+
+- chore: release 4.12.0 [`b25c775`](https://github.com/rive-app/rive-react/commit/b25c7759947b3eaa2b3e62e3304f269235128179)
+- chore: bump rive web to 2.18.0 [`17811ad`](https://github.com/rive-app/rive-react/commit/17811adac4976b01a797589342d74f42a0972cb8)
+
 #### [v4.11.3](https://github.com/rive-app/rive-react/compare/v4.11.2...v4.11.3)
 
+> 8 June 2024
+
+- chore: release 4.11.3 [`e4fcef5`](https://github.com/rive-app/rive-react/commit/e4fcef529e84882004162355782f3b304e9260a8)
 - update rive canvas to 2.17.3 [`f51fe6e`](https://github.com/rive-app/rive-react/commit/f51fe6ee2aafef72f9272e49535d4f2c89b9b44f)
 
 #### [v4.11.2](https://github.com/rive-app/rive-react/compare/v4.11.1...v4.11.2)

README.md

@@ -27,17 +27,25 @@ This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-a
 
 :house_with_garden: [Homepage](https://rive.app/)
 
-:blue_book: [General help docs](https://help.rive.app/)
+:blue_book: [General help docs](https://rive.app/community/doc/)
 
-🛠 [Resources for building in Rive](https://rive.app/resources/)
+🛠 [Rive Forums](https://rive.app/community/forums/home)
 
 ## Getting started
 
 Follow along with the link below for a quick start in getting Rive React integrated into your React apps.
 
-[Getting Started with Rive in React](https://help.rive.app/runtimes/overview/react)
+- [Getting Started with Rive in React](https://rive.app/community/doc/react/docRfaSQ0eaE)
+- [API documentation](https://rive.app/community/doc/parameters-and-return-values/docJlDMNulDh)
 
-[API documentation](https://help.rive.app/runtimes/overview/react/parameters-and-return-values)
+For more information, see the Runtime sections of the Rive help documentation:
+
+- [Animation Playback](https://rive.app/community/doc/animation-playback/docDKKxsr7ko)
+- [Layout](https://rive.app/community/doc/layout/docBl81zd1GB)
+- [State Machines](https://rive.app/community/doc/state-machines/docxeznG7iiK)
+- [Rive Text](https://rive.app/community/doc/text/docn2E6y1lXo)
+- [Rive Events](https://rive.app/community/doc/rive-events/docbOnaeffgr)
+- [Loading Assets](https://rive.app/community/doc/loading-assets/doct4wVHGPgC)
 
 ## Supported versions
 
@@ -60,7 +68,7 @@ For even more examples and resources on using Rive at runtime or in other tools,
 
 Using an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through version bumps; breaking changes and all!
 
-[Migration guides](https://help.rive.app/runtimes/overview/react/migrating-from-1.x.x-to-3.x.x)
+[Migration guides](https://rive.app/community/doc/migrating-from-v3-to-v4/dociIPXVHKFF)
 
 ## Contributing
 

examples/stories/StateMachineDocs.stories.mdx

@@ -16,7 +16,7 @@ import './rive-overview.css';
 
 # State Machine Usage
 
-Not familiar with Rive State Machines? Check out our [help docs](https://help.rive.app/editor/state-machine) on what these are first!
+Not familiar with Rive State Machines? Check out our [help docs](https://rive.app/community/doc/state-machine/docwH5zPdh93) 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:
 

npm/react-canvas-lite/README.md

@@ -6,4 +6,4 @@ Output for `rive-react` using the backing `@rive-app/canvas-lite` JS runtime.
 
 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.
+At this time, this lite version of `@rive-app/react-canvas-lite` will not render Rive Text onto the canvas or play Rive Audio. Note however, that even if your Rive file may include Rive Text components, rendering the graphic should not cause any app errors, or cease to render. The same is true for playing audio.

npm/react-canvas-lite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas-lite",
-  "version": "4.11.3",
+  "version": "4.16.6",
   "description": "React wrapper around the @rive-app/canvas-lite 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-lite": "2.17.3"
+    "@rive-app/canvas-lite": "2.23.10"
   },
   "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.11.3",
+  "version": "4.16.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": "2.17.3"
+    "@rive-app/canvas": "2.23.10"
   },
   "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.11.3",
+  "version": "4.16.6",
   "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.17.3"
+    "@rive-app/webgl": "2.23.10"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

npm/react-webgl2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.11.3",
+  "version": "4.16.6",
   "description": "React wrapper around the @rive-app/webgl2 library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -17,7 +17,9 @@
     "url": "https://github.com/rive-app/rive-react/issues"
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
-  "dependencies": {},
+  "dependencies": {
+    "@rive-app/webgl2": "2.23.10"
+  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }

package.json

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

src/components/Rive.tsx

@@ -21,7 +21,7 @@ export interface RiveProps {
    */
   stateMachines?: string | string[];
   /**
-   * Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://help.rive.app/runtimes/layout for more on layout configuration.
+   * Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://rive.app/community/doc/layout/docBl81zd1GB for more on layout configuration.
    */
   layout?: Layout;
   /**

src/hooks/useRive.tsx

@@ -6,9 +6,10 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from '@rive-app/canvas';
+import { Rive, EventType, Fit } from '@rive-app/canvas';
 import { UseRiveParameters, UseRiveOptions, RiveState } from '../types';
 import useResizeCanvas from './useResizeCanvas';
+import useDevicePixelRatio from './useDevicePixelRatio';
 import { getOptions } from '../utils';
 import useIntersectionObserver from './useIntersectionObserver';
 
@@ -74,16 +75,27 @@ export default function useRive(
   const isParamsLoaded = Boolean(riveParams);
   const options = getOptions(opts);
 
+  const devicePixelRatio = useDevicePixelRatio();
+
   /**
    * When the canvas/parent container resize, reset the Rive layout to match the
    * new (0, 0, canvas.width, canvas.height) bounds in the render loop
    */
   const onCanvasHasResized = useCallback(() => {
     if (rive) {
+      if (rive.layout && rive.layout.fit === Fit.Layout) {
+        if (canvasElem) {
+          const resizeFactor = devicePixelRatio * rive.layout.layoutScaleFactor;
+          rive.devicePixelRatioUsed = devicePixelRatio;
+          rive.artboardWidth = canvasElem?.width / resizeFactor;
+          rive.artboardHeight = canvasElem?.height / resizeFactor;
+        }
+      }
+
       rive.startRendering();
       rive.resizeToCanvas();
     }
-  }, [rive]);
+  }, [rive, devicePixelRatio]);
 
   // Watch the canvas parent container resize and size the canvas to match
   useResizeCanvas({

src/hooks/useRiveFile.ts

@@ -23,20 +23,25 @@ function useRiveFile(params: UseRiveFileParameters): RiveFileState {
     let file: RiveFile | null = null;
 
     const loadRiveFile = async () => {
-      setStatus('loading');
-      file = new RiveFile(params);
-      file.init();
-      file.on(EventType.Load, () => {
-        // We request an instance to add +1  to the referencesCount so it doesn't get destroyed
-        // while this hook is active
-        file?.getInstance();
+      try {
+        setStatus('loading');
+        file = new RiveFile(params);
+        file.init();
+        file.on(EventType.Load, () => {
+          // We request an instance to add +1 to the referencesCount so it doesn't get destroyed
+          // while this hook is active
+          file?.getInstance();
+          setRiveFile(file);
+          setStatus('success');
+        });
+        file.on(EventType.LoadError, () => {
+          setStatus('failed');
+        });
         setRiveFile(file);
-        setStatus('success');
-      });
-      file.on(EventType.LoadError, () => {
+      } catch (error) {
+        console.error(error);
         setStatus('failed');
-      });
-      setRiveFile(file);
+      }
     };
 
     loadRiveFile();

src/hooks/useStateMachineInput.ts

@@ -40,7 +40,7 @@ export default function useStateMachineInput(
     }
     setStateMachineInput();
     if (rive) {
-      rive.on(EventType.Play, () => {
+      rive.on(EventType.Load, () => {
         // Check if the component/canvas is mounted before setting state to avoid setState
         // on an unmounted component in some rare cases
         setStateMachineInput();

test/useRiveFile.test.tsx

@@ -23,6 +23,8 @@ describe('useRiveFile', () => {
     mocked(RiveFile).mockClear();
   });
 
+
+
   it('initializes RiveFile with provided parameters', async () => {
     const params = {
       src: 'file-src',
@@ -38,7 +40,7 @@ describe('useRiveFile', () => {
   it('cleans up RiveFile on unmount', async () => {
     const params = {
       src: 'file-src',
-      enableRiveAssetCDN: false 
+      enableRiveAssetCDN: false
     };
 
     const { result, unmount } = renderHook(() => useRiveFile(params));
@@ -54,7 +56,7 @@ describe('useRiveFile', () => {
   it('does not reinitialize RiveFile if src has not changed', async () => {
     const params = {
       src: 'file-src',
-      enableRiveAssetCDN: false 
+      enableRiveAssetCDN: false
     };
 
     const { rerender } = renderHook(() => useRiveFile(params));
@@ -64,7 +66,7 @@ describe('useRiveFile', () => {
     expect(RiveFile).toHaveBeenCalledTimes(1);
   });
 
-  it('does not reinitialize RiveFile if buffer has not changed', async () => { 
+  it('does not reinitialize RiveFile if buffer has not changed', async () => {
     const params = {
       buffer: new ArrayBuffer(10),
       enableRiveAssetCDN: false
@@ -112,4 +114,29 @@ describe('useRiveFile', () => {
 
     expect(RiveFile).toHaveBeenCalledTimes(2);
   });
+
+  it('handles RiveFile initialization failure gracefully', async () => {
+
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
+    const error = new Error("Initialization failed");
+
+    mocked(RiveFile).mockImplementation(() => {
+      throw error;
+    });
+
+    const params = {
+      src: 'file-src',
+      enableRiveAssetCDN: false,
+    };
+
+    const { result, rerender } = renderHook(() => useRiveFile(params));
+
+    rerender();
+
+    expect(result.current.status).toBe('failed');
+    expect(result.current.riveFile).toBeNull();
+    expect(consoleSpy).toHaveBeenCalledWith(error);
+
+    consoleSpy.mockRestore();
+  });
 });