From dfa59bf33105d2b184ddb538c1534b7b6693c47f Mon Sep 17 00:00:00 2001
From: Zach Plata <plata.zach@gmail.com>
Date: Mon, 1 Aug 2022 19:00:46 -0500
Subject: [PATCH 1/2] Fix: Prevent canvas resolution resizing if user passes in
 resolution values on canvas

---
 src/hooks/useRive.tsx | 28 +++++++++++++++++++++++-----
 test/useRive.test.tsx | 31 +++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx
index 6abd179..3f0642e 100644
--- a/src/hooks/useRive.tsx
+++ b/src/hooks/useRive.tsx
@@ -25,6 +25,8 @@ function RiveComponent({
   setCanvasRef,
   className = '',
   style,
+  width,
+  height,
   ...rest
 }: RiveComponentProps & ComponentProps<'canvas'>) {
   const containerStyle = {
@@ -39,7 +41,13 @@ function RiveComponent({
       className={className}
       {...(!className && { style: containerStyle })}
     >
-      <canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} {...rest} />
+      <canvas
+        ref={setCanvasRef}
+        style={{ verticalAlign: 'top' }}
+        {...(width !== undefined && {width, 'data-rive-width-prop': width})}
+        {...(height !== undefined && {height, 'data-rive-height-prop': height})}
+        {...rest}
+      />
     </div>
   );
 }
@@ -130,18 +138,28 @@ export default function useRive(
     const boundsChanged =
       width !== dimensions.width || height !== dimensions.height;
     if (canvasRef.current && rive && boundsChanged) {
+      const widthProp = canvasRef.current.getAttribute('data-rive-width-prop');
+      const heightProp = canvasRef.current.getAttribute('data-rive-height-prop');
       if (options.fitCanvasToArtboardHeight) {
         containerRef.current.style.height = height + 'px';
       }
       if (options.useDevicePixelRatio) {
         const dpr = window.devicePixelRatio || 1;
-        canvasRef.current.width = dpr * width;
-        canvasRef.current.height = dpr * height;
+        if (!widthProp) {
+          canvasRef.current.width = dpr * width;
+        }
+        if (!heightProp) {
+          canvasRef.current.height = dpr * height;
+        }
         canvasRef.current.style.width = width + 'px';
         canvasRef.current.style.height = height + 'px';
       } else {
-        canvasRef.current.width = width;
-        canvasRef.current.height = height;
+        if (!widthProp) {
+          canvasRef.current.width = width;
+        }
+        if (!heightProp) {
+          canvasRef.current.height = height;
+        }
       }
       setDimensions({ width, height });
 
diff --git a/test/useRive.test.tsx b/test/useRive.test.tsx
index 94194a7..c73e6f1 100644
--- a/test/useRive.test.tsx
+++ b/test/useRive.test.tsx
@@ -376,4 +376,35 @@ describe('useRive', () => {
     );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
+
+  it('sets does not override user-provided canvas resolutions', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    global.devicePixelRatio = 2;
+
+    const riveMock = {
+      ...baseRiveMock,
+      resizeToCanvas: jest.fn(),
+    };
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => riveMock);
+
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(600);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+    const { result } = renderHook(() => useRive(params));
+
+    const { RiveComponent: RiveTestComponent } = result.current;
+     render(
+      <RiveTestComponent width={300} height={300} />
+    );
+    await act(async () => {
+      result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
+    });
+
+    expect(result.current.canvas).toHaveAttribute('width', '300');
+  });
 });

From 38404453bec16ff7296a3d4fb3b1623277012307 Mon Sep 17 00:00:00 2001
From: Zach Plata <plata.zach@gmail.com>
Date: Mon, 1 Aug 2022 23:21:25 -0500
Subject: [PATCH 2/2] fix test name

---
 test/useRive.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/useRive.test.tsx b/test/useRive.test.tsx
index c73e6f1..2d80a65 100644
--- a/test/useRive.test.tsx
+++ b/test/useRive.test.tsx
@@ -377,7 +377,7 @@ describe('useRive', () => {
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
 
-  it('sets does not override user-provided canvas resolutions', async () => {
+  it('container bounds do not override user-provided canvas resolutions', async () => {
     const params = {
       src: 'file-src',
     };