chore: release 4.16.4

CHANGELOG.md

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

npm/react-canvas-lite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas-lite",
-  "version": "4.14.5",
+  "version": "4.16.4",
   "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.21.6"
+    "@rive-app/canvas-lite": "2.23.8"
   },
   "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.14.5",
+  "version": "4.16.4",
   "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.21.6"
+    "@rive-app/canvas": "2.23.8"
   },
   "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.14.5",
+  "version": "4.16.4",
   "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.21.6"
+    "@rive-app/webgl": "2.23.8"
   },
   "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.14.5",
+  "version": "4.16.4",
   "description": "React wrapper around the @rive-app/webgl2 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/webgl2": "2.21.6"
+    "@rive-app/webgl2": "2.23.8"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package.json

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

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({