chore: release 3.0.0

CHANGELOG.md

@@ -4,9 +4,9 @@ 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).
 
-#### [v2.0.0](https://github.com/rive-app/rive-react/compare/v1.0.5...v2.0.0)
+#### [v3.0.0](https://github.com/rive-app/rive-react/compare/v1.0.5...v3.0.0)
 
-- Fix: Authenticate registry before doing npm release dryrun [`74b791f`](https://github.com/rive-app/rive-react/commit/74b791ffa4042c98aa5d5e02ef03e9df2eb6dd16)
+- Fix animation playing with autoplay false when animation name passed [`aab811b`](https://github.com/rive-app/rive-react/commit/aab811b975d8832c2be14779675392a17b1db5ff)
 
 #### [v1.0.5](https://github.com/rive-app/rive-react/compare/v1.0.4...v1.0.5)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",

src/hooks/useRive.tsx

@@ -233,8 +233,13 @@ export default function useRive(
   const animations = riveParams?.animations;
   useEffect(() => {
     if (rive && animations) {
-      rive.stop(rive.animationNames);
-      rive.play(animations);
+      if (rive.isPlaying) {
+        rive.stop(rive.animationNames);
+        rive.play(animations);
+      } else if (rive.isPaused) {
+        rive.stop(rive.animationNames);
+        rive.pause(animations);
+      }
     }
   }, [animations, rive]);
 

test/useRive.test.tsx

@@ -287,6 +287,7 @@ describe('useRive', () => {
       stop: stopMock,
       play: playMock,
       animationNames: ['light'],
+      isPlaying: true,
     };
 
     // @ts-ignore
@@ -311,6 +312,49 @@ describe('useRive', () => {
     expect(playMock).toBeCalledWith('dark');
   });
 
+  it('updates the paused animation when the animations param changes if the animation is paused', async () => {
+    const params = {
+      src: 'file-src',
+      animations: 'light',
+    };
+
+    const playMock = jest.fn();
+    const pauseMock = jest.fn();
+    const stopMock = jest.fn();
+
+    const riveMock = {
+      on: (_: string, cb: () => void) => cb(),
+      stop: stopMock,
+      play: playMock,
+      pause: pauseMock,
+      animationNames: ['light'],
+      isPlaying: false,
+      isPaused: true,
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => riveMock);
+
+    const canvasSpy = document.createElement('canvas');
+
+    const { result, rerender } = renderHook((params) => useRive(params), {
+      initialProps: params,
+    });
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+    });
+
+    rerender({
+      src: 'file-src',
+      animations: 'dark',
+    });
+
+    expect(stopMock).toBeCalledWith(['light']);
+    expect(pauseMock).toBeCalledWith('dark');
+    expect(playMock).not.toBeCalled();
+  });
+
   it('does not set styles if className is passed in for the canvas container', async () => {
     const params = {
       src: 'file-src',
@@ -332,8 +376,10 @@ describe('useRive', () => {
       result.current.setCanvasRef(canvasSpy);
     });
 
-    const {RiveComponent: RiveTestComponent} = result.current;
-    const {container} = render(<RiveTestComponent className="rive-test-clas" style={{width: '50%'}} />);
+    const { RiveComponent: RiveTestComponent } = result.current;
+    const { container } = render(
+      <RiveTestComponent className="rive-test-clas" style={{ width: '50%' }} />
+    );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
 });