From 826daccf1b74cb1a962f5cfb0b3351cf112c506c Mon Sep 17 00:00:00 2001
From: CI <pggordonhayes@gmail.com>
Date: Wed, 30 Oct 2024 20:20:41 +0100
Subject: [PATCH] fix: additional layout configuration that react needs

---
 src/hooks/useRive.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx
index 67dfd2b..7ab3694 100644
--- a/src/hooks/useRive.tsx
+++ b/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.fit === Fit.Layout) {
+        if (canvasElem) {
+          // TODO (Gordon): expose these are properties on JS runtime
+          (rive as any)._devicePixelRatioUsed = devicePixelRatio;
+          (rive as any).artboard.width = canvasElem?.width / devicePixelRatio;
+          (rive as any).artboard.height = canvasElem?.height / devicePixelRatio;
+        }
+      }
+
       rive.startRendering();
       rive.resizeToCanvas();
     }
-  }, [rive]);
+  }, [rive, devicePixelRatio]);
 
   // Watch the canvas parent container resize and size the canvas to match
   useResizeCanvas({