chore: release 4.15.2

CHANGELOG.md

@@ -4,8 +4,136 @@ 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.15.2](https://github.com/rive-app/rive-react/compare/v4.15.1...v4.15.2)
+
+- 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)

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.13.2",
+  "version": "4.15.2",
   "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.19.2"
+    "@rive-app/canvas-lite": "2.22.0"
   },
   "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.13.2",
+  "version": "4.15.2",
   "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.19.2"
+    "@rive-app/canvas": "2.22.0"
   },
   "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.13.2",
+  "version": "4.15.2",
   "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.19.2"
+    "@rive-app/webgl": "2.22.0"
   },
   "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.13.2",
+  "version": "4.15.2",
   "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.22.0"
+  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "4.13.2",
+  "version": "4.15.2",
   "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.19.2",
-    "@rive-app/canvas-lite": "2.19.2",
-    "@rive-app/webgl": "2.19.2"
+    "@rive-app/canvas": "2.22.0",
+    "@rive-app/canvas-lite": "2.22.0",
+    "@rive-app/webgl": "2.22.0",
+    "@rive-app/webgl2": "2.22.0"
   },
   "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,28 @@ 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;
+          // TODO (Gordon): expose these are properties on JS runtime
+          (rive as any)._devicePixelRatioUsed = devicePixelRatio;
+          (rive as any).artboard.width = canvasElem?.width / resizeFactor;
+          (rive as any).artboard.height = canvasElem?.height / resizeFactor;
+        }
+      }
+
       rive.startRendering();
       rive.resizeToCanvas();
     }
-  }, [rive]);
+  }, [rive, devicePixelRatio]);
 
   // Watch the canvas parent container resize and size the canvas to match
   useResizeCanvas({