chore: release 4.14.6

apply "triage" label, too

.eslintrc.js

@@ -1,29 +1,38 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true
+    es2021: true,
   },
-  extends: ['plugin:react/recommended', 'prettier', 'plugin:storybook/recommended'],
+  extends: [
+    'plugin:react/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     ecmaVersion: 12,
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: ['@typescript-eslint', 'prettier'],
+  plugins: ['@typescript-eslint', 'prettier', 'react-hooks'],
   rules: {
     '@typescript-eslint/no-unused-vars': 'error',
-    'prefer-const': ['warn', {
-      destructuring: 'all'
-    }],
+    'prefer-const': [
+      'warn',
+      {
+        destructuring: 'all',
+      },
+    ],
     'no-var': 'error',
-    eqeqeq: ['error', 'smart']
+    eqeqeq: ['error', 'smart'],
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'off', // Checks effect dependencies
   },
   settings: {
     react: {
-      version: 'detect'
-    }
-  }
-};
+      version: 'detect',
+    },
+  },
+};

.github/workflows/add_to_project.yml

@@ -0,0 +1,26 @@
+name: Adds all new issues to project board
+
+on:
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.5.0
+        with:
+          project-url: https://github.com/orgs/rive-app/projects/12/views/1
+          github-token: ${{ secrets.ADD_TO_PROJECT_ACTION }}
+          
+      - uses: actions/github-script@v6
+        with:
+          script: |
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ["triage"]
+            })

.github/workflows/publish.yml

@@ -1,43 +1,28 @@
 name: Publish to NPM
 on:
-  pull_request:
-    types: [closed]
-    branches:
-      - main
+  workflow_dispatch:
+    inputs:
+      major:
+        description: 'Major'
+        type: boolean
+        default: false
+      minor:
+        description: 'Minor'
+        type: boolean
+        default: false
 jobs:
-  determine_version:
-    name: Determine the next build version
-    if: github.event.pull_request.merged == true
+  publish_job:
     runs-on: ubuntu-latest
-    outputs:
-      version: ${{ steps.echo_version.outputs.version }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Install dependencies
-        run: npm install
-        working-directory: ./
-      - name: Git config
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Git config
         run: |
           git config --local user.email 'hello@rive.app'
           git config --local user.name ${{ github.actor }}
       - name: Authenticate with registry
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-      - id: determine_version
-        name: Get Version
-        run: npm run release -- --ci --release-version | tail -n 1 > RELEASE_VERSION
-        working-directory: ./
-        env:
-          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-      - id: echo_version
-        run: echo "::set-output name=version::$(cat ./RELEASE_VERSION)"
-  
-  merge_job:
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-    needs: [determine_version]
-    steps:
-      - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
           node-version: '16.x'
@@ -50,30 +35,24 @@ jobs:
         run: npm run lint
       - name: Run Tests
         run: npm test
-      - name: Build main dist
-        run: npm run build
-      - name: Copy separated builds
-        run: ./scripts/build.sh
-      - name: Copy package jsons to separate react outputs
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: ./scripts/setup_all_packages.sh
-      - name: Bump Versions of react outputs
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          RELEASE_VERSION: ${{ needs.determine_version.outputs.version }}
-        run: ./scripts/bump_all_versions.sh
-      - name: Git config
-        run: |
-          git config --local user.email 'hello@rive.app'
-          git config --local user.name ${{ github.actor }}
-      - name: Authenticate with registry
-        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-      - name: Release rive-react
+      - if: ${{ inputs.major == true }}
+        name: Major Release - Bump version number, update changelog, push and tag
+        run: npm run release:major
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-        run: npm run release -- --ci
-      - name: Release @rive-app/react-* variants
+          PAT_GITHUB: ${{ secrets.PAT_GITHUB }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - if: ${{inputs.major == false && inputs.minor == true}}
+        name: Minor release - Bump version number, update changelog, push and tag
+        run: npm run release:minor
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-        run: ./scripts/publish_all.sh
+          PAT_GITHUB: ${{ secrets.PAT_GITHUB }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - if: ${{inputs.major == false && inputs.minor == false}}
+        name: Patch release - Bump version number, update changelog, push and tag
+        run: npm run release:patch
+        env:
+          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
+          PAT_GITHUB: ${{ secrets.PAT_GITHUB }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/storybook.yml

@@ -1,10 +1,12 @@
 name: Deploy Storybook
 on:
-  pull_request:
-    types: [closed]
-    branches:
-      - main
-    paths: ['src', 'examples/stories/**'] # Trigger the action only when files change in the folders defined here
+  # Testing to see if this job is causing the race condition
+  workflow_dispatch:
+  # pull_request:
+  #   types: [closed]
+  #   branches:
+  #     - main
+  #   paths: ['src', 'examples/stories/**'] # Trigger the action only when files change in the folders defined here
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest

.release-it.json

@@ -1,5 +1,7 @@
 {
   "git": {
+    "addUntrackedFiles": true,
+    "requireCleanWorkingDir": false,
     "commitMessage": "chore: release ${version}",
     "tagName": "v${version}",
     "changelog": "npx auto-changelog --stdout --commit-limit false --unreleased --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs"
@@ -12,6 +14,12 @@
     "releaseName": "${version}"
   },
   "hooks": {
-    "after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"]
+    "after:version:bump": [
+      "npm run build",
+      "npm run setup-builds",
+      "npm run setup-packages",
+      "npx auto-changelog -p",
+      "npm run publish:all"
+    ]
   }
 }

CHANGELOG.md

@@ -4,10 +4,920 @@ 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).
 
-#### [v3.0.15](https://github.com/rive-app/rive-react/compare/v3.0.1...v3.0.15)
+#### [v4.14.6](https://github.com/rive-app/rive-react/compare/v4.14.5...v4.14.6)
 
+- 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)
+
+> 3 July 2024
+
+- chore: release 4.13.1 [`e823e95`](https://github.com/rive-app/rive-react/commit/e823e9519f9ffa6bb3a1e4fd8bd3b2c98f6143a6)
+- update rive version to 2.19.1 [`ac88187`](https://github.com/rive-app/rive-react/commit/ac881871189a134b821a86e25029d2db056c2bef)
+- fix: change initialization from play to load event [`1897e82`](https://github.com/rive-app/rive-react/commit/1897e823b9bd500813c96a1512d90dc3b9bbe976)
+
+#### [v4.13.0](https://github.com/rive-app/rive-react/compare/v4.12.1...v4.13.0)
+
+> 28 June 2024
+
+- chore: release 4.13.0 [`1a2e57a`](https://github.com/rive-app/rive-react/commit/1a2e57a82c391a602e72721945b93c43949ea23b)
+- update rive version to 2.19.0 [`0d16fee`](https://github.com/rive-app/rive-react/commit/0d16feeec196cb17fd44a875aa132c014aa44243)
+
+#### [v4.12.1](https://github.com/rive-app/rive-react/compare/v4.12.0...v4.12.1)
+
+> 25 June 2024
+
+- fix: catch RiveFile initialization error in hook [`9b02c0f`](https://github.com/rive-app/rive-react/commit/9b02c0f1bc7fb61e17f5d6f51da120c11e82e61a)
+- chore: release 4.12.1 [`ca48907`](https://github.com/rive-app/rive-react/commit/ca48907649a8dae636947e95afb8931e2299e5c6)
+
+#### [v4.12.0](https://github.com/rive-app/rive-react/compare/v4.11.3...v4.12.0)
+
+> 18 June 2024
+
+- chore: release 4.12.0 [`b25c775`](https://github.com/rive-app/rive-react/commit/b25c7759947b3eaa2b3e62e3304f269235128179)
+- chore: bump rive web to 2.18.0 [`17811ad`](https://github.com/rive-app/rive-react/commit/17811adac4976b01a797589342d74f42a0972cb8)
+
+#### [v4.11.3](https://github.com/rive-app/rive-react/compare/v4.11.2...v4.11.3)
+
+> 8 June 2024
+
+- chore: release 4.11.3 [`e4fcef5`](https://github.com/rive-app/rive-react/commit/e4fcef529e84882004162355782f3b304e9260a8)
+- update rive canvas to 2.17.3 [`f51fe6e`](https://github.com/rive-app/rive-react/commit/f51fe6ee2aafef72f9272e49535d4f2c89b9b44f)
+
+#### [v4.11.2](https://github.com/rive-app/rive-react/compare/v4.11.1...v4.11.2)
+
+> 7 June 2024
+
+- chore: release 4.11.2 [`0f558e6`](https://github.com/rive-app/rive-react/commit/0f558e66e1a78aae923bd79c39b25c9725eb76bd)
+- bump rive [`7a67fb1`](https://github.com/rive-app/rive-react/commit/7a67fb14f7cb581e2fa823e9d968fc506ce2834e)
+
+#### [v4.11.1](https://github.com/rive-app/rive-react/compare/v4.11.0...v4.11.1)
+
+> 6 June 2024
+
+- chore: release 4.11.1 [`da3fc31`](https://github.com/rive-app/rive-react/commit/da3fc317ff9cc275a30d5a42adad3d0532947f9a)
+- chore: release 4.11.0 [`aa92c01`](https://github.com/rive-app/rive-react/commit/aa92c013296bfd4c848e1c41b0c52ad48b1f6ab7)
+- update rive version [`9b40a1a`](https://github.com/rive-app/rive-react/commit/9b40a1a02e1877445b3e3dc35b96a4b7e3a54780)
+
+#### [v4.11.0](https://github.com/rive-app/rive-react/compare/v4.10.0...v4.11.0)
+
+> 6 June 2024
+
+- chore: release 4.11.0 [`2142210`](https://github.com/rive-app/rive-react/commit/21422104c9d502887352c40a6e185c69098f438d)
+- chore: bump web to v2.17.0 [`99a8a42`](https://github.com/rive-app/rive-react/commit/99a8a42a15969e70c96cc90460ec9fcba514ed4c)
+
+#### [v4.10.0](https://github.com/rive-app/rive-react/compare/v4.9.5...v4.10.0)
+
+> 28 May 2024
+
+- fix observer and use single instance [`c324332`](https://github.com/rive-app/rive-react/commit/c32433284ad4116170ab016139ecba7678e6c21e)
+- feat: create useRiveFile hook [`16dc257`](https://github.com/rive-app/rive-react/commit/16dc257b2f904d51101535002b9fb34640a65842)
+- change hooks lifecycle to account for component reloading [`8e181d6`](https://github.com/rive-app/rive-react/commit/8e181d6ae2dff82875c60be789dcd63bedaba883)
+
+#### [v4.9.5](https://github.com/rive-app/rive-react/compare/v4.9.4...v4.9.5)
+
+> 10 May 2024
+
+- chore: release 4.9.5 [`a3a41dc`](https://github.com/rive-app/rive-react/commit/a3a41dca404193a900f021a2358d85d4ab44fb26)
+- bump canvas to 2.15.6 [`b78c971`](https://github.com/rive-app/rive-react/commit/b78c9715d713031d0dbdacb8c4517be5d5a411b8)
+
+#### [v4.9.4](https://github.com/rive-app/rive-react/compare/v4.9.3...v4.9.4)
+
+> 9 May 2024
+
+- chore: release 4.9.4 [`520e5bb`](https://github.com/rive-app/rive-react/commit/520e5bb51d8c31b769149a6daee2c84ec0a1a3d6)
+- bump version to 2.15.5 [`586ee4c`](https://github.com/rive-app/rive-react/commit/586ee4c002a13251d8f13adce11bc6f9cda3a904)
+
+#### [v4.9.3](https://github.com/rive-app/rive-react/compare/v4.9.2...v4.9.3)
+
+> 8 May 2024
+
+- chore: release 4.9.3 [`3d6c7ed`](https://github.com/rive-app/rive-react/commit/3d6c7ed4991da4b729b11e02ea2cda3d3f6b078c)
+- bump version to 2.15.4 [`c3900b7`](https://github.com/rive-app/rive-react/commit/c3900b7845a63862b7da0d64d16294dd015e876e)
+
+#### [v4.9.2](https://github.com/rive-app/rive-react/compare/v4.9.1...v4.9.2)
+
+> 30 April 2024
+
+- chore: release 4.9.2 [`d369817`](https://github.com/rive-app/rive-react/commit/d3698171138887e4a27180b31c40750090fb0863)
+- bump rive canvas to 2.15.2 [`d68302c`](https://github.com/rive-app/rive-react/commit/d68302ccb3f5756b753f29897033da2c0aa015d5)
+
+#### [v4.9.1](https://github.com/rive-app/rive-react/compare/v4.9.0...v4.9.1)
+
+> 30 April 2024
+
+- chore: release 4.9.1 [`bbd4cc7`](https://github.com/rive-app/rive-react/commit/bbd4cc7af651df5fb5f28313b7e7e55e294a0282)
+- update to version 2.15.1 [`3936277`](https://github.com/rive-app/rive-react/commit/3936277f658981f6928bf0ef77ea01bb60ce27c5)
+
+#### [v4.9.0](https://github.com/rive-app/rive-react/compare/v4.8.10...v4.9.0)
+
+> 24 April 2024
+
+- chore: release 4.9.0 [`aa2a783`](https://github.com/rive-app/rive-react/commit/aa2a783d1c5e6560f59fc8299858d68464a28308)
+- chore: bump rive wasm to v2.15.0 [`d8d7d64`](https://github.com/rive-app/rive-react/commit/d8d7d64749ff019edd6d50ea98dea9000967071a)
+
+#### [v4.8.10](https://github.com/rive-app/rive-react/compare/v4.8.9...v4.8.10)
+
+> 23 April 2024
+
+- chore: release 4.8.10 [`af3edad`](https://github.com/rive-app/rive-react/commit/af3edad2c20e820569544318bd68bb3c56b9e180)
+- bump rive library dependencies to 2.14.4 [`5326f80`](https://github.com/rive-app/rive-react/commit/5326f800f7a99eafa9c2081e22966509f89008da)
+
+#### [v4.8.9](https://github.com/rive-app/rive-react/compare/v4.8.8...v4.8.9)
+
+> 18 April 2024
+
+- chore: release 4.8.9 [`b44f9ad`](https://github.com/rive-app/rive-react/commit/b44f9ad9e157702af5b5a946c8a476f4842392ce)
+- Bump rive js libraries to 2.14.3 [`b249530`](https://github.com/rive-app/rive-react/commit/b2495300b7a7badcdfb6ced96c2eabb8779c36f0)
+
+#### [v4.8.8](https://github.com/rive-app/rive-react/compare/v4.8.7...v4.8.8)
+
+> 17 April 2024
+
+- chore: release 4.8.8 [`eb43626`](https://github.com/rive-app/rive-react/commit/eb436263d786ffdee20d39dea0ce16b8aec101a9)
+- bump canvas and webgl to 2.14.2 [`0e63852`](https://github.com/rive-app/rive-react/commit/0e6385288ec85c40c5e7f4bc6f15b98a02ec6b88)
+
+#### [v4.8.7](https://github.com/rive-app/rive-react/compare/v4.8.6...v4.8.7)
+
+> 11 April 2024
+
+- chore: release 4.8.7 [`78f7543`](https://github.com/rive-app/rive-react/commit/78f75434fc179326918f6e837058a74fa4a8dbd6)
+- bump react canvas to 2.14.1 [`a9c2950`](https://github.com/rive-app/rive-react/commit/a9c29504191d929b7e96587100d375ba6787deb2)
+
+#### [v4.8.6](https://github.com/rive-app/rive-react/compare/v4.8.5...v4.8.6)
+
+> 9 April 2024
+
+- chore: release 4.8.6 [`e799f64`](https://github.com/rive-app/rive-react/commit/e799f64554e05de8c3b0666aa7091859576d37ba)
+- Bump rive-canvas to 2.13.2 [`95a1daa`](https://github.com/rive-app/rive-react/commit/95a1daa4efbb3835e886317ad16161fe8ac843a5)
+
+#### [v4.8.5](https://github.com/rive-app/rive-react/compare/v4.8.4...v4.8.5)
+
+> 8 April 2024
+
+- chore: release 4.8.5 [`8a5b88c`](https://github.com/rive-app/rive-react/commit/8a5b88c59132e5d04fdcce1db903397fd15b5a18)
+- bump version to 2.13.0 [`d3b29cf`](https://github.com/rive-app/rive-react/commit/d3b29cf7d7c6fe99e4e12f4579ef0876ef875b35)
+
+#### [v4.8.4](https://github.com/rive-app/rive-react/compare/v4.8.3...v4.8.4)
+
+> 29 March 2024
+
+- feat: add new webgl2 package for new Rive Renderer [`a7875b2`](https://github.com/rive-app/rive-react/commit/a7875b26a43342f6380a5009b25b831acfcfb610)
+- chore: release 4.8.4 [`611522b`](https://github.com/rive-app/rive-react/commit/611522b3e06c30923b4aefa737310c376dab861c)
+- Update README.md [`4653b8b`](https://github.com/rive-app/rive-react/commit/4653b8bea1169408c94962e80fe3f2c34c8b221f)
+
+#### [v4.8.3](https://github.com/rive-app/rive-react/compare/v4.8.2...v4.8.3)
+
+> 26 February 2024
+
+- chore: release 4.8.3 [`0d0688f`](https://github.com/rive-app/rive-react/commit/0d0688feb6a7f5dedacbfd15a16bc4cb30e97a04)
+- chore: bump rive-wasm to 2.10.3 for text bug fixes [`7a97c14`](https://github.com/rive-app/rive-react/commit/7a97c14c93422cb0d133fd2533c08af7eb81ba95)
+
+#### [v4.8.2](https://github.com/rive-app/rive-react/compare/v4.8.1...v4.8.2)
+
+> 21 February 2024
+
+- chore: release 4.8.2 [`cff7875`](https://github.com/rive-app/rive-react/commit/cff787524ddd8b9286e5322b97be2c236834d854)
+- chore: bump rive-wasm to 2.10.2 for various dependency fixes [`a34a588`](https://github.com/rive-app/rive-react/commit/a34a588ee5c47e9c16f4d66d44446a311863d5e6)
+
+#### [v4.8.1](https://github.com/rive-app/rive-react/compare/v4.8.0...v4.8.1)
+
+> 9 February 2024
+
+- chore: release 4.8.1 [`aa89f2a`](https://github.com/rive-app/rive-react/commit/aa89f2a1baf9da73f71ed74616cd87059b32df74)
+- chore: bump rive-wasm to 2.10.1 for text fix at c++ level [`39d275b`](https://github.com/rive-app/rive-react/commit/39d275b3e0ca0cd0b2f296370094fd39efe1662a)
+
+#### [v4.8.0](https://github.com/rive-app/rive-react/compare/v4.7.1...v4.8.0)
+
+> 6 February 2024
+
+- chore: release 4.8.0 [`e22acf9`](https://github.com/rive-app/rive-react/commit/e22acf98ba2b2464b3a6b6f73f518a42852a2d0e)
+- chore: bump rive-wasm dependency to 2.10.0 [`2e52e35`](https://github.com/rive-app/rive-react/commit/2e52e35ddcdb6c169fcedaf792baa3eeab52b1c7)
+
+#### [v4.7.1](https://github.com/rive-app/rive-react/compare/v4.7.0...v4.7.1)
+
+> 9 January 2024
+
+- feat: add customDevicePixelRatio param from WASM for adjusting canvas size based on dpr [`c2319b8`](https://github.com/rive-app/rive-react/commit/c2319b8dea562320966d09f54e0057a643ed7e92)
+- chore: release 4.7.1 [`f67cb24`](https://github.com/rive-app/rive-react/commit/f67cb244d2d1ebd9cf4645ca94c45875a623209c)
+
+#### [v4.7.0](https://github.com/rive-app/rive-react/compare/v4.6.2...v4.7.0)
+
+> 21 December 2023
+
+- chore: release 4.7.0 [`877e43e`](https://github.com/rive-app/rive-react/commit/877e43e354b11cfa1f774515f9d00f1c013ef2ac)
+- chore: bump rive-wasm to 2.9.0 for iOS check when creating offscreen webgl in c2d renderer [`6a033a9`](https://github.com/rive-app/rive-react/commit/6a033a99d30b85fdd6b82aada28036d3a6112054)
+
+#### [v4.6.2](https://github.com/rive-app/rive-react/compare/v4.6.1...v4.6.2)
+
+> 15 December 2023
+
+- chore: release 4.6.2 [`88f7558`](https://github.com/rive-app/rive-react/commit/88f7558ddf9172bd90bfdeb8ecc138ec81b1ca25)
+- chore: bump rive-wasm to 2.8.3 to reintroduce cleaning up of image textures [`cfe3a29`](https://github.com/rive-app/rive-react/commit/cfe3a298fba9157ecf27ccac775ae13cb3e3953b)
+
+#### [v4.6.1](https://github.com/rive-app/rive-react/compare/v4.6.0...v4.6.1)
+
+> 15 December 2023
+
+- chore: release 4.6.1 [`8e24185`](https://github.com/rive-app/rive-react/commit/8e24185f3ff7670eaa5aa93778cb53010936e6eb)
+- chore: bump rive-wasm to 2.8.2 for additional proxy gl checks before rendering an image/mesh [`5fad06d`](https://github.com/rive-app/rive-react/commit/5fad06d4bdf377a03a5f276a77b2c1037ae84474)
+
+#### [v4.6.0](https://github.com/rive-app/rive-react/compare/v4.5.8...v4.6.0)
+
+> 15 December 2023
+
+- chore: release 4.6.0 [`df14bc3`](https://github.com/rive-app/rive-react/commit/df14bc383b2a6feb08ffdd4e5557f65bbd1430ba)
+- chore: bump rive-wasm to 2.8.0 for GL as a proxy solution to checking lost context [`1196dd4`](https://github.com/rive-app/rive-react/commit/1196dd4c4e21cc9a012616fa04c02a36791336cf)
+- add webgl to 2.8.0 too [`b8dc1e5`](https://github.com/rive-app/rive-react/commit/b8dc1e53712821bf9896564e7a7c1bf562107a90)
+
+#### [v4.5.8](https://github.com/rive-app/rive-react/compare/v4.5.7...v4.5.8)
+
+> 15 December 2023
+
+- chore: release 4.5.8 [`06ceb3c`](https://github.com/rive-app/rive-react/commit/06ceb3cdb0ba497b3dda75474268c6920c99b2a9)
+- revert wasm build to 2.7.7 for testing intermediate changes before 2.7.8 [`acaa12f`](https://github.com/rive-app/rive-react/commit/acaa12f7fc7ffb6fa0ea67e0d9fe6b3680ac64f7)
+
+#### [v4.5.7](https://github.com/rive-app/rive-react/compare/v4.5.6...v4.5.7)
+
+> 14 December 2023
+
+- chore: release 4.5.7 [`0acf384`](https://github.com/rive-app/rive-react/commit/0acf384570fee3cf32e42dfe41bee0da21a252b8)
+- chore: bump rive-wasm to 2.7.8 for texture deletion check [`97a29ac`](https://github.com/rive-app/rive-react/commit/97a29acfdc25eca767a0402095708b110b496dc3)
+
+#### [v4.5.6](https://github.com/rive-app/rive-react/compare/v4.5.5...v4.5.6)
+
+> 30 November 2023
+
+- chore: release 4.5.6 [`5eb5ccf`](https://github.com/rive-app/rive-react/commit/5eb5ccfdaa2fe1e3277dbeff4fd8781b160c1ded)
+- bump rive-wasm to 2.7.6 [`edcc2c1`](https://github.com/rive-app/rive-react/commit/edcc2c1320027cc116dfa2cd1fc821b630be4403)
+
+#### [v4.5.5](https://github.com/rive-app/rive-react/compare/v4.5.4...v4.5.5)
+
+> 29 November 2023
+
+- chore: release 4.5.5 [`68d8ca4`](https://github.com/rive-app/rive-react/commit/68d8ca44fa61c94d6a5bb04a268015c71f7013d5)
+- patch: bump wasm to 2.7.5 [`ee9b83d`](https://github.com/rive-app/rive-react/commit/ee9b83d7643fc41ab422e29203d5e241a2a22d98)
+
+#### [v4.5.4](https://github.com/rive-app/rive-react/compare/v4.5.3...v4.5.4)
+
+> 21 November 2023
+
+- chore: release 4.5.4 [`187066c`](https://github.com/rive-app/rive-react/commit/187066c2cbc6240dd8cf46ea9b58ba69d98017c4)
+- chore: bump rive-wasm to 2.7.4 for bone fixes [`427d74d`](https://github.com/rive-app/rive-react/commit/427d74d14f69f557609c891f3803955c1ffcad12)
+
+#### [v4.5.3](https://github.com/rive-app/rive-react/compare/v4.5.2...v4.5.3)
+
+> 9 November 2023
+
+- chore: release 4.5.3 [`0613774`](https://github.com/rive-app/rive-react/commit/061377432e23e263404ba773ae5aca593edc696a)
+- patch: bump rive-wasm to 2.7.3 [`53d7548`](https://github.com/rive-app/rive-react/commit/53d7548b15bb445f1c34ff599597ec139e80b0d6)
+
+#### [v4.5.2](https://github.com/rive-app/rive-react/compare/v4.5.1...v4.5.2)
+
+> 8 November 2023
+
+- Add a react-canvas-lite package to build setup [`75dac6f`](https://github.com/rive-app/rive-react/commit/75dac6fe64b4904d22d986299da4c1d8a9941622)
+- chore: release 4.5.2 [`e1a4ca0`](https://github.com/rive-app/rive-react/commit/e1a4ca005828bf1750d8e6359e29ae635355bb1a)
+- Tweak copy [`83ebd67`](https://github.com/rive-app/rive-react/commit/83ebd6776da2bcaaea9c98c946f8e941575c9097)
+
+#### [v4.5.1](https://github.com/rive-app/rive-react/compare/v4.5.0...v4.5.1)
+
+> 8 November 2023
+
+- chore: release 4.5.1 [`e13c023`](https://github.com/rive-app/rive-react/commit/e13c023933b85ff0439dfbd467c39b3054699361)
+- Bump WASM dependency to 2.7.2 for nested input patch [`95183ff`](https://github.com/rive-app/rive-react/commit/95183ff8d58ed20b80979233e423663a8a66ae5e)
+
+#### [v4.5.0](https://github.com/rive-app/rive-react/compare/v4.4.0...v4.5.0)
+
+> 26 October 2023
+
+- chore: release 4.5.0 [`64416e0`](https://github.com/rive-app/rive-react/commit/64416e0b4dc8bbe82fdcd605f8ee1e705c75318d)
+- chore: bump react to 4.5.0 [`1c6837b`](https://github.com/rive-app/rive-react/commit/1c6837bf92a88eae3f80c71db67de1c19d8840e9)
+
+#### [v4.4.0](https://github.com/rive-app/rive-react/compare/v4.3.4...v4.4.0)
+
+> 6 October 2023
+
+- chore: release 4.4.0 [`15330ab`](https://github.com/rive-app/rive-react/commit/15330ababeaf49897e79fff2c731ee05612cb40e)
+- bump rive-app versions to 2.5.0 [`af70b81`](https://github.com/rive-app/rive-react/commit/af70b8150dc84cbcfeece2a018084a3d30c0288e)
+
+#### [v4.3.4](https://github.com/rive-app/rive-react/compare/v4.3.3...v4.3.4)
+
+> 3 October 2023
+
+- chore: release 4.3.4 [`a984e00`](https://github.com/rive-app/rive-react/commit/a984e007f480c1b236888a20f7d6d467eecd1dcf)
+- patch: bump rive-wasm to 2.4.4 [`04d8e01`](https://github.com/rive-app/rive-react/commit/04d8e01f87f20dc084b3de88c1e66d32cdbadeed)
+
+#### [v4.3.3](https://github.com/rive-app/rive-react/compare/v4.3.2...v4.3.3)
+
+> 20 September 2023
+
+- chore: release 4.3.3 [`44e46c5`](https://github.com/rive-app/rive-react/commit/44e46c5dee31df2f0035f00a58955d3b3a83e223)
+- chore: bump wasm to 2.4.3 for url sanitization [`323e92e`](https://github.com/rive-app/rive-react/commit/323e92e6361aa68b9a749e8466679760cc4a41a1)
+
+#### [v4.3.2](https://github.com/rive-app/rive-react/compare/v4.3.1...v4.3.2)
+
+> 19 September 2023
+
+- chore: release 4.3.2 [`a07fa02`](https://github.com/rive-app/rive-react/commit/a07fa02ed6cebe2661ccee8bd37fdcef18acc981)
+- chore: bump rive-wasm to 2.4.2 [`d710e1e`](https://github.com/rive-app/rive-react/commit/d710e1e4b24ad2eda66277eb748bdac7e9e48302)
+
+#### [v4.3.1](https://github.com/rive-app/rive-react/compare/v4.3.0...v4.3.1)
+
+> 18 September 2023
+
+- chore: release 4.3.1 [`d35e9b2`](https://github.com/rive-app/rive-react/commit/d35e9b28051ad28528142dbde1f4c5bd7a9814ab)
+- chore: bump rive-wasm to 2.4.1 for event updates [`cf44463`](https://github.com/rive-app/rive-react/commit/cf44463805e8117ee6f1ac5025b973f35f307b1c)
+
+#### [v4.3.0](https://github.com/rive-app/rive-react/compare/v4.2.1...v4.3.0)
+
+> 13 September 2023
+
+- feature: Bump WASM dependency to support Rive Events [`6ba68fa`](https://github.com/rive-app/rive-react/commit/6ba68fab9e5482a3ab2a92410ebb1b422db9ff9e)
+- chore: release 4.3.0 [`f59f446`](https://github.com/rive-app/rive-react/commit/f59f44692a9ca62c9c3f98447087647b125ada5d)
+
+#### [v4.2.1](https://github.com/rive-app/rive-react/compare/v4.2.0...v4.2.1)
+
+> 7 September 2023
+
+- chore: release 4.2.1 [`982addf`](https://github.com/rive-app/rive-react/commit/982addf163ad73a8b077c7a1a27d50bdae402260)
+- chore: bump rive-wasm to 2.3.1 for mesh fix [`dfd89c7`](https://github.com/rive-app/rive-react/commit/dfd89c769193541192718a68a8035e05caa57f07)
+
+#### [v4.2.0](https://github.com/rive-app/rive-react/compare/v4.1.6...v4.2.0)
+
+> 1 September 2023
+
+- chore: release 4.2.0 [`0247a46`](https://github.com/rive-app/rive-react/commit/0247a46c478f53499826fa40b6e03e25e833d969)
+- Updating rive wasm [`44626c7`](https://github.com/rive-app/rive-react/commit/44626c7450999abe095609b06aeafe240da8ddd5)
+
+#### [v4.1.6](https://github.com/rive-app/rive-react/compare/v4.1.5...v4.1.6)
+
+> 26 August 2023
+
+- chore: release 4.1.6 [`c0eb7d6`](https://github.com/rive-app/rive-react/commit/c0eb7d689dd96e41c19e3f647f30f8f324cf54a8)
+- chore: bump rive-wasm for follow up solo fix [`ff7a6aa`](https://github.com/rive-app/rive-react/commit/ff7a6aa6761d95ca5ea41f2d34e82a63b5e0ffee)
+
+#### [v4.1.5](https://github.com/rive-app/rive-react/compare/v4.1.4...v4.1.5)
+
+> 25 August 2023
+
+- chore: release 4.1.5 [`dc89439`](https://github.com/rive-app/rive-react/commit/dc89439d84624e44c5e1218a78bf823ed6928695)
+- chore: bump rive-wasm for follow path constraints on solos [`7ebc10a`](https://github.com/rive-app/rive-react/commit/7ebc10a4da5515ae1350edfe02ce21430de128e6)
+
+#### [v4.1.4](https://github.com/rive-app/rive-react/compare/v4.1.3...v4.1.4)
+
+> 14 August 2023
+
+- chore: release 4.1.4 [`e8e1a5b`](https://github.com/rive-app/rive-react/commit/e8e1a5bc089bbf14307d83b5ef672d74d0f23eb4)
+- chore: bump rive-wasm to 2.1.5 for follow path fix [`1bb8885`](https://github.com/rive-app/rive-react/commit/1bb8885f22583cccaa4b3b54fcbdf42c366548d3)
+
+#### [v4.1.3](https://github.com/rive-app/rive-react/compare/v4.1.2...v4.1.3)
+
+> 10 August 2023
+
+- chore: release 4.1.3 [`00d13ba`](https://github.com/rive-app/rive-react/commit/00d13badcf230a3879713301ddafffe90cd84557)
+- chore: bump wasm to 2.1.3 [`b9ab7b8`](https://github.com/rive-app/rive-react/commit/b9ab7b83d288f578385267b22b89a4b8e80508dc)
+
+#### [v4.1.2](https://github.com/rive-app/rive-react/compare/v4.1.1...v4.1.2)
+
+> 5 August 2023
+
+- chore: release 4.1.2 [`e0f0017`](https://github.com/rive-app/rive-react/commit/e0f00174c8a91f26131d3913e076a4e0c1bce343)
+- chore: bump rive-wasm to 2.1.2 [`200a86a`](https://github.com/rive-app/rive-react/commit/200a86a6bab5cd0e8a31c211df90b9dbf8e7d1be)
+
+#### [v4.1.1](https://github.com/rive-app/rive-react/compare/v4.1.0...v4.1.1)
+
+> 3 August 2023
+
+- chore: release 4.1.1 [`2662259`](https://github.com/rive-app/rive-react/commit/26622596c8a41b2c5cc5b83bb8db42de3e9dcac7)
+- patch: bump rive-wasm to 2.1.1 [`ac789f0`](https://github.com/rive-app/rive-react/commit/ac789f0855eaada115d84fd35da0030aad6b80e1)
+
+#### [v4.1.0](https://github.com/rive-app/rive-react/compare/v4.0.0...v4.1.0)
+
+> 31 July 2023
+
+- chore: release 4.1.0 [`6ecdc05`](https://github.com/rive-app/rive-react/commit/6ecdc05aea05277557c352601b535b3d16361435)
+- feature: expose RiveProps type from package [`f8aa50f`](https://github.com/rive-app/rive-react/commit/f8aa50fa498493428a81a169f36daa0e331b4da5)
+- feature: Add ability to get and set text via wasm runtime bump [`b59bfde`](https://github.com/rive-app/rive-react/commit/b59bfdef8425df26cf14e4e384b60bba812eaeef)
+
+### [v4.0.0](https://github.com/rive-app/rive-react/compare/v3.0.57...v4.0.0)
+
+> 26 July 2023
+
+- chore: release 4.0.0 [`948ded2`](https://github.com/rive-app/rive-react/commit/948ded25f7e0bbfb3a2c4553cc1e73555e3e092f)
+- Bump to rive wasm 2.0.0 [`27f7f2b`](https://github.com/rive-app/rive-react/commit/27f7f2b250c23f4de3c49c491ea2348534e6e2d9)
+
+#### [v3.0.57](https://github.com/rive-app/rive-react/compare/v3.0.56...v3.0.57)
+
+> 25 July 2023
+
+- chore: move to manual npm publish workflow [`4cce306`](https://github.com/rive-app/rive-react/commit/4cce3067a7bce0d66a17b0347c4d87a9d090da0b)
+- chore: release 3.0.57 [`184ba2e`](https://github.com/rive-app/rive-react/commit/184ba2e110e055a2923b885f5c627ab30cf1d3d2)
+- chore: remove dryrun from release it script [`f6d8db3`](https://github.com/rive-app/rive-react/commit/f6d8db323bc57235d1cdce505bb86cb8d05e38fa)
+
+#### [v3.0.56](https://github.com/rive-app/rive-react/compare/v3.0.55...v3.0.56)
+
+> 24 July 2023
+
+- chore: release 3.0.56 [`4496eff`](https://github.com/rive-app/rive-react/commit/4496eff59845a8a30a8dbe26436d4e325629762c)
+- patch: bump rive-wasm for follow-path patch [`5e98586`](https://github.com/rive-app/rive-react/commit/5e98586354849006152ef25a8b30fe781ef0cca6)
+
+#### [v3.0.55](https://github.com/rive-app/rive-react/compare/v3.0.54...v3.0.55)
+
+> 19 July 2023
+
+- chore: release 3.0.55 [`f19295f`](https://github.com/rive-app/rive-react/commit/f19295f9a5a379a3e8a7c8491f5ccadba6598a28)
+- feature: add onAdvance callback through wasm bump too 1.2.2 [`7054630`](https://github.com/rive-app/rive-react/commit/70546308b44718e04f5295f60b99f0fc7bbe8172)
+
+#### [v3.0.54](https://github.com/rive-app/rive-react/compare/v3.0.53...v3.0.54)
+
+> 26 June 2023
+
+- chore: release 3.0.54 [`62a425f`](https://github.com/rive-app/rive-react/commit/62a425f30e4e6d6ff7bfd76326fbb93b2241d306)
+- patch: Bump WASM runtimes for interpolation on states [`4a554dd`](https://github.com/rive-app/rive-react/commit/4a554dd1ad951b17c405096f0a6bcb9ae0600a4f)
+
+#### [v3.0.53](https://github.com/rive-app/rive-react/compare/v3.0.52...v3.0.53)
+
+> 9 June 2023
+
+- chore: release 3.0.53 [`3e6262f`](https://github.com/rive-app/rive-react/commit/3e6262f21f6cc3195030f6072edde904469bf4a6)
+- Bump wasm to 1.2.0 [`e57a99b`](https://github.com/rive-app/rive-react/commit/e57a99b2d193aa713770dbb34f2a66ecd7bad155)
+
+#### [v3.0.52](https://github.com/rive-app/rive-react/compare/v3.0.51...v3.0.52)
+
+> 7 June 2023
+
+- chore: release 3.0.52 [`8a968ec`](https://github.com/rive-app/rive-react/commit/8a968ec266f1ed78bb614551d36ef7145d1db0ae)
+- fix: bump WASM to fix iterator over animatables [`b5f00e5`](https://github.com/rive-app/rive-react/commit/b5f00e5c97146573474ab73773fe189b1bcc5d43)
+
+#### [v3.0.51](https://github.com/rive-app/rive-react/compare/v3.0.50...v3.0.51)
+
+> 2 June 2023
+
+- Feature: Move canvas sizing logic into useResizeCanvas hook and clean up util hooks [`2c82fa0`](https://github.com/rive-app/rive-react/commit/2c82fa04e771550c058fae97c38a61e34a6499fc)
+- Update prop docs [`a24b910`](https://github.com/rive-app/rive-react/commit/a24b910096e3e73b964fb42dd37bdacd8a791995)
+- chore: release 3.0.51 [`22e6dd3`](https://github.com/rive-app/rive-react/commit/22e6dd34941edf32e71d01c483fd603fd1d1b95c)
+
+#### [v3.0.50](https://github.com/rive-app/rive-react/compare/v3.0.49...v3.0.50)
+
+> 26 May 2023
+
+- chore: release 3.0.50 [`2b24949`](https://github.com/rive-app/rive-react/commit/2b249494d5c75fbe317c2e4069bf16a8333c609e)
+- feat: allow for children to be set inside the canvas for fallback content when canvas cannot be shown [`b56c17d`](https://github.com/rive-app/rive-react/commit/b56c17d48c51176d7c7b0e10d465548be2538eac)
+
+#### [v3.0.49](https://github.com/rive-app/rive-react/compare/v3.0.48...v3.0.49)
+
+> 24 May 2023
+
+- chore: release 3.0.49 [`a6fe08c`](https://github.com/rive-app/rive-react/commit/a6fe08ced98cd939c5b1e1288db900bcc05aeb61)
+- add joystick support [`cd1e141`](https://github.com/rive-app/rive-react/commit/cd1e1410f48df008474ba0c4a1fd6a74fa67445e)
+
+#### [v3.0.48](https://github.com/rive-app/rive-react/compare/v3.0.47...v3.0.48)
+
+> 18 May 2023
+
+- chore: release 3.0.48 [`353fbf8`](https://github.com/rive-app/rive-react/commit/353fbf8e9d7bad154164f2068ea967c755ac64a1)
+- feature: bump web runtime to support joysticks [`ae05ad4`](https://github.com/rive-app/rive-react/commit/ae05ad4375375f43b1f4493c76bcc18cd6c40676)
+
+#### [v3.0.47](https://github.com/rive-app/rive-react/compare/v3.0.46...v3.0.47)
+
+> 12 May 2023
+
+- chore: release 3.0.47 [`ff8bbb0`](https://github.com/rive-app/rive-react/commit/ff8bbb084cebf1f6f37b4432440c4c3df00b3c66)
+- patch: bump wasm to 1.1.6 for flicker fix [`89a6802`](https://github.com/rive-app/rive-react/commit/89a6802fa05bb809dc30d740aaff11f4e83eb21a)
+
+#### [v3.0.46](https://github.com/rive-app/rive-react/compare/v3.0.45...v3.0.46)
+
+> 2 May 2023
+
+- Add prop to the standalone Rive component [`d3bc913`](https://github.com/rive-app/rive-react/commit/d3bc913bcf70e62df6cea5b5a08d0135c965f9ff)
+- chore: release 3.0.46 [`91025e6`](https://github.com/rive-app/rive-react/commit/91025e6772403fe688ae9eb6992971d2ab47b933)
+- patch: bump rive-wasm to allow new parameter for disabling Rive listeners [`ce56321`](https://github.com/rive-app/rive-react/commit/ce56321e1d1b565a152220bf415e3adced63c20d)
+
+#### [v3.0.45](https://github.com/rive-app/rive-react/compare/v3.0.44...v3.0.45)
+
+> 19 April 2023
+
+- Update add_to_project.yml [`6544874`](https://github.com/rive-app/rive-react/commit/6544874d3d94fbe93f9a8d0cdbb047189aced1ce)
+- chore: release 3.0.45 [`4b6f541`](https://github.com/rive-app/rive-react/commit/4b6f5410fde11f69cc757cda51682cab53b3c2fc)
+
+#### [v3.0.44](https://github.com/rive-app/rive-react/compare/v3.0.43...v3.0.44)
+
+> 19 April 2023
+
+- Create add_to_project.yml [`e06fdd1`](https://github.com/rive-app/rive-react/commit/e06fdd1c8be9c6fe224d6ec83547965d773f633c)
+- chore: release 3.0.44 [`ed90c7f`](https://github.com/rive-app/rive-react/commit/ed90c7f7c9851f66578ad5d270b68b5e44c1592e)
+
+#### [v3.0.43](https://github.com/rive-app/rive-react/compare/v3.0.42...v3.0.43)
+
+> 14 April 2023
+
+- chore: release 3.0.43 [`b8ffb6b`](https://github.com/rive-app/rive-react/commit/b8ffb6b53cda2a0ae4143b26dbc0b75bf669a7c7)
+- patch: bump rive-wasm to take path fix [`2dc925e`](https://github.com/rive-app/rive-react/commit/2dc925ef70777caf65b7f7785c21d03cbe9cff5a)
+
+#### [v3.0.42](https://github.com/rive-app/rive-react/compare/v3.0.41...v3.0.42)
+
+> 13 April 2023
+
+- chore: release 3.0.42 [`639de79`](https://github.com/rive-app/rive-react/commit/639de79c9edba584439afba46d9390b0dd76a704)
+- chore: bump rive-wasm to get solo patch [`a9961c8`](https://github.com/rive-app/rive-react/commit/a9961c821aa7f5c512f92e77cc50e88ba5e69ecb)
+
+#### [v3.0.41](https://github.com/rive-app/rive-react/compare/v3.0.40...v3.0.41)
+
+> 6 April 2023
+
+- chore: release 3.0.41 [`fc082d1`](https://github.com/rive-app/rive-react/commit/fc082d1a03ca6d88439f6be4bb5a3bcb77ed7ddb)
+- patch: bump wasm dependency for blend state enhancements [`87fa1ae`](https://github.com/rive-app/rive-react/commit/87fa1ae2a56a5d71fe137fa33a0a3eb0cb3e9c1c)
+
+#### [v3.0.40](https://github.com/rive-app/rive-react/compare/v3.0.39...v3.0.40)
+
+> 5 April 2023
+
+- chore: release 3.0.40 [`62490a5`](https://github.com/rive-app/rive-react/commit/62490a50f9523a146d3040547f73c6068090daf0)
+- feature: Add support for touch and drag interactions on canvas [`fcc1a16`](https://github.com/rive-app/rive-react/commit/fcc1a16df494f0f791ff84551ea4db140bffbc50)
+
+#### [v3.0.39](https://github.com/rive-app/rive-react/compare/v3.0.38...v3.0.39)
+
+> 30 March 2023
+
+- chore: release 3.0.39 [`29e0ceb`](https://github.com/rive-app/rive-react/commit/29e0ceb797183b2b6eb6aa9728acb433bb689df3)
+- fix: bump wasm dependency for clipping issue fix [`3e6a951`](https://github.com/rive-app/rive-react/commit/3e6a951ca1b3566a7f93def6c17fe87436d2f1bd)
+
+#### [v3.0.38](https://github.com/rive-app/rive-react/compare/v3.0.37...v3.0.38)
+
+> 3 March 2023
+
+- chore: release 3.0.38 [`04910f7`](https://github.com/rive-app/rive-react/commit/04910f78f1779242626db0dfb74ab27ae95c75fa)
+- maint: bump wasm dependency for more speed on state updates [`c2977c7`](https://github.com/rive-app/rive-react/commit/c2977c705c5572480be3f253b7237bdc2d3eea35)
+
+#### [v3.0.37](https://github.com/rive-app/rive-react/compare/v3.0.36...v3.0.37)
+
+> 1 March 2023
+
+- chore: release 3.0.37 [`4e21374`](https://github.com/rive-app/rive-react/commit/4e2137422b8c1d135a6501add3f2cc68140f1817)
+- maint: bump wasm dependency for more speed on state updates [`0696417`](https://github.com/rive-app/rive-react/commit/06964179262d4b79114f3609d79cc6560c30ef94)
+
+#### [v3.0.36](https://github.com/rive-app/rive-react/compare/v3.0.35...v3.0.36)
+
+> 22 February 2023
+
+- chore: release 3.0.36 [`f11a433`](https://github.com/rive-app/rive-react/commit/f11a433365c34818976798106fc03a264e6ceaea)
+- Fix: matchMedia add event listener for safari 13 and older versions [`3cbbf99`](https://github.com/rive-app/rive-react/commit/3cbbf99fec90f58cdf410df861f272115a7704e6)
+- maint: bump wasm to support speed on states feature [`48a4726`](https://github.com/rive-app/rive-react/commit/48a4726d1f7a01088959d47580082e5ddfed1492)
+
+#### [v3.0.35](https://github.com/rive-app/rive-react/compare/v3.0.34...v3.0.35)
+
+> 17 January 2023
+
+- chore: release 3.0.35 [`03f05f5`](https://github.com/rive-app/rive-react/commit/03f05f57b7f277d7d90701954b5ca09842bcaab6)
+- fix: update rive-wasm to try patching slow burn memory leak [`8b483b8`](https://github.com/rive-app/rive-react/commit/8b483b807b8207fe12c864e19f64592c0bedac46)
+
+#### [v3.0.34](https://github.com/rive-app/rive-react/compare/v3.0.33...v3.0.34)
+
+> 16 December 2022
+
+- chore: release 3.0.34 [`816fcfc`](https://github.com/rive-app/rive-react/commit/816fcfcdbcb9f2d8f83cc7887f43aae011dee3be)
+- Bumping rive-app/canvas & webgl versions. [`6c28a87`](https://github.com/rive-app/rive-react/commit/6c28a8795eeabc10aa8bdcee99ee9754d924d0ae)
+
+#### [v3.0.33](https://github.com/rive-app/rive-react/compare/v3.0.32...v3.0.33)
+
+> 8 November 2022
+
+- maint: bump wasm runtime and replace old skills rive file example [`acba24c`](https://github.com/rive-app/rive-react/commit/acba24c4ed4f703303615819678c7273c385286f)
+- chore: release 3.0.33 [`6a57630`](https://github.com/rive-app/rive-react/commit/6a57630ae67df057472a6d40f354fcfe53cb5521)
+
+#### [v3.0.32](https://github.com/rive-app/rive-react/compare/v3.0.31...v3.0.32)
+
+> 21 October 2022
+
+- chore: release 3.0.32 [`1e6eb5e`](https://github.com/rive-app/rive-react/commit/1e6eb5ec927aa0bb10ee1e7659c4824c64702f58)
+- Bumping to latest Rive WASM to fix https://2dimensions.slack.com/archives/CLLCU09T6/p1666370141425879 [`6871a81`](https://github.com/rive-app/rive-react/commit/6871a81ebd17038426e7089ed836379d02a9c5fd)
+
+#### [v3.0.31](https://github.com/rive-app/rive-react/compare/v3.0.30...v3.0.31)
+
+> 21 October 2022
+
+- chore: release 3.0.31 [`33053b3`](https://github.com/rive-app/rive-react/commit/33053b3b7f0ff6d99ce4383ecea1f031ccb587e0)
+- bump runtimes to incorporate speed fix for state machines [`4040083`](https://github.com/rive-app/rive-react/commit/4040083d5a89510356e45433e5026664baf92a49)
+
+#### [v3.0.30](https://github.com/rive-app/rive-react/compare/v3.0.29...v3.0.30)
+
+> 20 October 2022
+
+- chore: release 3.0.30 [`2153b81`](https://github.com/rive-app/rive-react/commit/2153b81e6b74d33d1e2f709291fad338dcbb85da)
+- Bump dependencies to fix call to runtime cleanup [`6b1500e`](https://github.com/rive-app/rive-react/commit/6b1500e681ba8984d786eec4d414c4c8ad4b0268)
+
+#### [v3.0.29](https://github.com/rive-app/rive-react/compare/v3.0.28...v3.0.29)
+
+> 20 October 2022
+
+- chore: release 3.0.29 [`503702c`](https://github.com/rive-app/rive-react/commit/503702cf1f963204e3519b9b3dbfea1bfa271d0a)
+- Call cleanup on unmount [`7be20b0`](https://github.com/rive-app/rive-react/commit/7be20b0a874afab7f6a29122521f42c71a22aa51)
+
+#### [v3.0.28](https://github.com/rive-app/rive-react/compare/v3.0.27...v3.0.28)
+
+> 20 October 2022
+
+- chore: release 3.0.28 [`78491f5`](https://github.com/rive-app/rive-react/commit/78491f5819b78b2e7435a2509e89fd3c672f3126)
+- Bump canvas and webgl dependencies to fix alignment memory leaks [`39edb88`](https://github.com/rive-app/rive-react/commit/39edb88a19aaff478e4e9cbeeef58414f28fdb60)
+
+#### [v3.0.27](https://github.com/rive-app/rive-react/compare/v3.0.26...v3.0.27)
+
+> 4 October 2022
+
+- chore: release 3.0.27 [`fd1a165`](https://github.com/rive-app/rive-react/commit/fd1a1653b13c2fd15f2862e6c372a27fd49acd00)
+- Fix: Bump wasm to accomodate clipping bug on nested artboards [`8d7f0ab`](https://github.com/rive-app/rive-react/commit/8d7f0ab28c8aa6af3abe5269e7b8980cc1a8dbe7)
+
+#### [v3.0.26](https://github.com/rive-app/rive-react/compare/v3.0.25...v3.0.26)
+
+> 22 September 2022
+
+- fix: Adjust canvas size if devicePixelRatio changes for any reaason [`2b1aa01`](https://github.com/rive-app/rive-react/commit/2b1aa01a87c14f71b980d160f6607edc12d3eed6)
+- chore: release 3.0.26 [`2a2e532`](https://github.com/rive-app/rive-react/commit/2a2e53256401b6d7137db4b73c5901d587a888af)
+
+#### [v3.0.25](https://github.com/rive-app/rive-react/compare/v3.0.24...v3.0.25)
+
+> 21 September 2022
+
+- chore: release 3.0.25 [`06c4e2a`](https://github.com/rive-app/rive-react/commit/06c4e2aea39d8e08ee12760663bd612ca77f3e9c)
+- patch: bump js runtime dependency to address content security policy issue in WASM build [`819bd51`](https://github.com/rive-app/rive-react/commit/819bd51ea976bbea0c218379cd88304bd1738323)
+
+#### [v3.0.24](https://github.com/rive-app/rive-react/compare/v3.0.23...v3.0.24)
+
+> 15 September 2022
+
+- add tests [`a62e9b3`](https://github.com/rive-app/rive-react/commit/a62e9b3a9aeb51b71c441ea1560eea6431704ee7)
+- chore: release 3.0.24 [`6b7f113`](https://github.com/rive-app/rive-react/commit/6b7f1132964dafe9783f0a79782a2ba20638c7ce)
+- fix: make a canvas of size 0 until we calculate the bounds appropriately [`04685c0`](https://github.com/rive-app/rive-react/commit/04685c0bcda26ee0451ab8cc9fc09436e94d04f6)
+
+#### [v3.0.23](https://github.com/rive-app/rive-react/compare/v3.0.22...v3.0.23)
+
+> 31 August 2022
+
+- chore: release 3.0.23 [`48fd9f9`](https://github.com/rive-app/rive-react/commit/48fd9f9d8048ef098ed7550e6da0d3a4eb69148e)
+- Bump runtime version to fix broken version [`3c578b7`](https://github.com/rive-app/rive-react/commit/3c578b730f82059469393522722316f2ad3a61d3)
+
+#### [v3.0.22](https://github.com/rive-app/rive-react/compare/v3.0.21...v3.0.22)
+
+> 30 August 2022
+
+- chore: release 3.0.22 [`7a46886`](https://github.com/rive-app/rive-react/commit/7a468861336861361f4fceae45616f001bf4b448)
+- Update @rive-app/canvas and @rive-app/webgl dependencies to support non node builds [`092049d`](https://github.com/rive-app/rive-react/commit/092049d20f6f955a0528831d2b5e15087328bc75)
+
+#### [v3.0.21](https://github.com/rive-app/rive-react/compare/v3.0.20...v3.0.21)
+
+> 22 July 2022
+
+- chore: release 3.0.21 [`f7aced0`](https://github.com/rive-app/rive-react/commit/f7aced03cd3c39d039cc53af54947e328fe18e83)
+- rev rive-wasm dependencies & update render delay to be 0ms [`eb07281`](https://github.com/rive-app/rive-react/commit/eb072814155bb803f6faa831caa0e0292b8f6f28)
+
+#### [v3.0.20](https://github.com/rive-app/rive-react/compare/v3.0.19...v3.0.20)
+
+> 22 July 2022
+
+- update tests [`24d8e0a`](https://github.com/rive-app/rive-react/commit/24d8e0a90795f650806064d53ae1b362e3fd332f)
+- update resize behaviour to throttle, add parameters to enable switching modes [`1092b44`](https://github.com/rive-app/rive-react/commit/1092b44947e2ac07dd38d21e8b45445256c0a59d)
+- ensure we re evaluate state machine inputs when we play is triggered, looks like there maybe additional situations where we are going to need this. [`84b18cc`](https://github.com/rive-app/rive-react/commit/84b18cc3ddf86e55b6741956ea8f86d6d21f4078)
+
+#### [v3.0.19](https://github.com/rive-app/rive-react/compare/v3.0.18...v3.0.19)
+
+> 19 July 2022
+
+- chore: release 3.0.19 [`efe28aa`](https://github.com/rive-app/rive-react/commit/efe28aa5f35f5ddde3e89085c34016ce87bb5cbb)
+- fix tests that were automatically calling the rive load callback to be more controlled [`16d836c`](https://github.com/rive-app/rive-react/commit/16d836c95928e4294b565ecb444d517653c4988b)
+- Fix: Add check before setting Rive as state variable on Rive instance load [`838ed1a`](https://github.com/rive-app/rive-react/commit/838ed1abf8aeec86ca63bfef07953424ba9cce90)
+
+#### [v3.0.18](https://github.com/rive-app/rive-react/compare/v3.0.17...v3.0.18)
+
+> 14 July 2022
+
+- update canvas dimensions to use clientWidth and Height as opposed to BoundingClient, to avoid getting scaled information [`fd1c00a`](https://github.com/rive-app/rive-react/commit/fd1c00a995374634ec8552d20a0f7094fcb04e25)
+- chore: release 3.0.18 [`d010a55`](https://github.com/rive-app/rive-react/commit/d010a55cc0c065c353dd5424a6fef8a58f416c61)
+
+#### [v3.0.17](https://github.com/rive-app/rive-react/compare/v3.0.16...v3.0.17)
+
+> 14 July 2022
+
+- add resizeObserver to replace window listeners for all but IE [`e966316`](https://github.com/rive-app/rive-react/commit/e966316971d88a7242651a0b1fa3a1eaff48d276)
+- refactored the IE check into `useSize` [`5be9d2f`](https://github.com/rive-app/rive-react/commit/5be9d2f8741224ed7cd291898b1abe88668b3fed)
+- Fix useEffects so they're not in conditional statements [`ec61a68`](https://github.com/rive-app/rive-react/commit/ec61a6835d9ca6158538f5d1ac5b6b861c58ac57)
+
+#### [v3.0.16](https://github.com/rive-app/rive-react/compare/v3.0.15...v3.0.16)
+
+> 12 July 2022
+
+- Docs: Condense down README and add CONTRIBUTING guide [`0863835`](https://github.com/rive-app/rive-react/commit/08638359bb817213fb861950a20cae7e7b27111f)
+- staged work [`7dbade4`](https://github.com/rive-app/rive-react/commit/7dbade4589ca0524b58f9abbdcc38afa3e3b1866)
+- chore: release 3.0.16 [`ae6efc1`](https://github.com/rive-app/rive-react/commit/ae6efc14d46c33b90fe89ee067347296daf865e7)
+
+#### [v3.0.15](https://github.com/rive-app/rive-react/compare/v3.0.14...v3.0.15)
+
+> 28 June 2022
+
+- chore: release 3.0.15 [`8175c4a`](https://github.com/rive-app/rive-react/commit/8175c4a4d406ac80703a6df346f3b5562d2e9311)
 - Patch: Bump js runtime dependencies for nested artboard display patch [`795ee53`](https://github.com/rive-app/rive-react/commit/795ee533405ec98457db074d11730849e1be5c88)
 
+#### [v3.0.14](https://github.com/rive-app/rive-react/compare/v3.0.13...v3.0.14)
+
+> 28 June 2022
+
+- Deploying to main from  @ 3477afdef166251f35f1778a3143ff6c6efecc58 🚀 [`7aee5cf`](https://github.com/rive-app/rive-react/commit/7aee5cfab4eaca1fc9369742639507a770c4f756)
+- chore: release 3.0.14 [`04353db`](https://github.com/rive-app/rive-react/commit/04353db43266f6dcf40f4ef7f3be23afa13c2e0d)
+- Fix: Bump version because of race condition again [`1f0e511`](https://github.com/rive-app/rive-react/commit/1f0e511f6e047d05ca2783a56c2924a9c1af432a)
+
+#### [v3.0.13](https://github.com/rive-app/rive-react/compare/v3.0.12...v3.0.13)
+
+> 27 June 2022
+
+- Fix: Intake JS runtime patches for starting animation frames [`3477afd`](https://github.com/rive-app/rive-react/commit/3477afdef166251f35f1778a3143ff6c6efecc58)
+- chore: release 3.0.13 [`3695dd9`](https://github.com/rive-app/rive-react/commit/3695dd99504a05818563b6ba9c89db77a38ff305)
+
+#### [v3.0.12](https://github.com/rive-app/rive-react/compare/v3.0.11...v3.0.12)
+
+> 22 June 2022
+
+- chore: release 3.0.12 [`8b43a82`](https://github.com/rive-app/rive-react/commit/8b43a82c5f56cbb5b1fe7dacfa7ca8457fc6d413)
+- Fix: Bump cpp to get nested artboard opacity fix and fill rule patch [`bd49e6a`](https://github.com/rive-app/rive-react/commit/bd49e6a4ee66c68005b60a670700ef69b5322656)
+- Bump @rive-app/canvas to take the fillRule bug fix [`1dbb9cd`](https://github.com/rive-app/rive-react/commit/1dbb9cd38d41393b9f354cdf81e88c702aa3ae64)
+
+#### [v3.0.11](https://github.com/rive-app/rive-react/compare/v3.0.10...v3.0.11)
+
+> 22 June 2022
+
+- chore: release 3.0.11 [`aee7407`](https://github.com/rive-app/rive-react/commit/aee7407f7921c515f3c1d9aabf87387baddb4064)
+- Docs: Code snippets update to use new React package structure [`b48de9d`](https://github.com/rive-app/rive-react/commit/b48de9db8496be35f29bea87273a7a9fceefdafc)
+
+#### [v3.0.10](https://github.com/rive-app/rive-react/compare/v3.0.9...v3.0.10)
+
+> 20 June 2022
+
+- Deploying to main from  @ 5ad5a957a6e8f10abedc23f46033d4792e29dfe5 🚀 [`802648e`](https://github.com/rive-app/rive-react/commit/802648eda8fa0e5a0a35c66af06e476eac59fe9e)
+- chore: release 3.0.10 [`6772f16`](https://github.com/rive-app/rive-react/commit/6772f166b7f3e4747ae508a54e2533bb3ea49878)
+- Maint: roll canvas and webgl dependencies to include updates for rounded corners [`314d7c1`](https://github.com/rive-app/rive-react/commit/314d7c19cc727ad86114f968fa79fbd0be4074af)
+
+#### [v3.0.9](https://github.com/rive-app/rive-react/compare/v3.0.8...v3.0.9)
+
+> 9 June 2022
+
+- chore: release 3.0.9 [`1909218`](https://github.com/rive-app/rive-react/commit/19092189a7253dc38ab0707c1e98de2b31da6306)
+- Maint: Update docs for storybook link [`5ad5a95`](https://github.com/rive-app/rive-react/commit/5ad5a957a6e8f10abedc23f46033d4792e29dfe5)
+
+#### [v3.0.8](https://github.com/rive-app/rive-react/compare/v3.0.7...v3.0.8)
+
+> 9 June 2022
+
+- Maint: Add GH workflow for deploying storybook to Github Pages [`38625a0`](https://github.com/rive-app/rive-react/commit/38625a00c313192d0edbe1c3a855bea1ec56bd2b)
+- chore: release 3.0.8 [`414d6f8`](https://github.com/rive-app/rive-react/commit/414d6f895ac2184876dec90959c17c2b22f6843f)
+
+#### [v3.0.7](https://github.com/rive-app/rive-react/compare/v3.0.6...v3.0.7)
+
+> 8 June 2022
+
+- Feat: Move existing examples into Storybook and add documentation [`ec230fa`](https://github.com/rive-app/rive-react/commit/ec230faa738202cedad14cc866e30c4c03efffd7)
+- chore: release 3.0.7 [`bad688d`](https://github.com/rive-app/rive-react/commit/bad688dfa3841ec07e30fa07609a6cb7bb7c1688)
+
+#### [v3.0.6](https://github.com/rive-app/rive-react/compare/v3.0.5...v3.0.6)
+
+> 6 June 2022
+
+- chore: release 3.0.6 [`90c6d1e`](https://github.com/rive-app/rive-react/commit/90c6d1edb1d4bef6250dd4a5101a7cfe04ff9ce9)
+- Maint: Roll canvas and webgl dependencies forward to support nested state machines [`0480dc9`](https://github.com/rive-app/rive-react/commit/0480dc92c842265d601d08b60fb49392969cfd9e)
+
+#### [v3.0.5](https://github.com/rive-app/rive-react/compare/v3.0.4...v3.0.5)
+
+> 26 May 2022
+
+- chore: release 3.0.5 [`de24fa5`](https://github.com/rive-app/rive-react/commit/de24fa564117d4acbe60b4cf734abd9e951b30f1)
+- Feat: Add stateMachines param to the default Rive component [`84d9730`](https://github.com/rive-app/rive-react/commit/84d9730767a62c63e743d5a04bba5b3d480ea38d)
+- Maint: Bump wasm for another listener patch [`805afd5`](https://github.com/rive-app/rive-react/commit/805afd5dff2888294926c32ec07f5e24db804d09)
+
+#### [v3.0.4](https://github.com/rive-app/rive-react/compare/v3.0.3...v3.0.4)
+
+> 23 May 2022
+
+- chore: release 3.0.4 [`9abee34`](https://github.com/rive-app/rive-react/commit/9abee34d12641f845b93febf438df0f77f72153f)
+- Maint: Bump rive-wasm dependency for listener patches [`12801b1`](https://github.com/rive-app/rive-react/commit/12801b10cc8980339e5856d71d96da3c612cb291)
+
+#### [v3.0.3](https://github.com/rive-app/rive-react/compare/v3.0.2...v3.0.3)
+
+> 17 May 2022
+
+- Feat: Bump wasm and add examples to support touch feature [`3902948`](https://github.com/rive-app/rive-react/commit/3902948a2ef8af6955ef12124207edee29eb0be8)
+- chore: release 3.0.3 [`da11387`](https://github.com/rive-app/rive-react/commit/da1138755861aadb9e7c6cb0028f2120d610a6c5)
+
+#### [v3.0.2](https://github.com/rive-app/rive-react/compare/v3.0.1...v3.0.2)
+
+> 17 May 2022
+
+- chore: release 3.0.2 [`21a17ed`](https://github.com/rive-app/rive-react/commit/21a17ed40ee51263c666dde48b6c55e958eceeb8)
+- Maint: Bump wasm dependencies [`f0e7092`](https://github.com/rive-app/rive-react/commit/f0e70924ec9849f45ecddda801ad63e1d87b1bdb)
+
 #### [v3.0.1](https://github.com/rive-app/rive-react/compare/v3.0.0...v3.0.1)
 
 > 26 April 2022
@@ -210,13 +1120,26 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: release 0.0.15 [`f0b1aeb`](https://github.com/rive-app/rive-react/commit/f0b1aeb7d850103b61310c9251a827f835fadf58)
 - update rive-js with support for distance and transform constraints [`8612e0b`](https://github.com/rive-app/rive-react/commit/8612e0b15f6c93d4e5c276c95e7f36543466e4d6)
 
-#### [v0.0.14](https://github.com/rive-app/rive-react/compare/v0.0.11...v0.0.14)
+#### [v0.0.14](https://github.com/rive-app/rive-react/compare/v0.0.13...v0.0.14)
+
+> 21 July 2021
+
+- chore: release 0.0.14 [`d7f7eab`](https://github.com/rive-app/rive-react/commit/d7f7eab65577732fa1e9f792bc14f10d89c0ccaf)
+- chore: bump to 0.0.13 [`29bd502`](https://github.com/rive-app/rive-react/commit/29bd502208efa6928ffb47f06b5e548f071a8ade)
+
+#### [v0.0.13](https://github.com/rive-app/rive-react/compare/v0.0.12...v0.0.13)
+
+> 21 July 2021
+
+- chore: release 0.0.13 [`4b06d2d`](https://github.com/rive-app/rive-react/commit/4b06d2d8f5c12b0bdff58d9c14d5e41df0a41b48)
+- chore: bump to 0.0.12 [`7266fc5`](https://github.com/rive-app/rive-react/commit/7266fc5d2fc0404362031ea3d3c760309f6927e6)
+
+#### [v0.0.12](https://github.com/rive-app/rive-react/compare/v0.0.11...v0.0.12)
 
 > 21 July 2021
 
 - Bump rive-js to 0.7.19 with support for IK constraints [`6c80c53`](https://github.com/rive-app/rive-react/commit/6c80c5311e99ee47e9f4fc3c5f35ab908ddfa326)
-- chore: release 0.0.14 [`d7f7eab`](https://github.com/rive-app/rive-react/commit/d7f7eab65577732fa1e9f792bc14f10d89c0ccaf)
-- chore: bump to 0.0.13 [`29bd502`](https://github.com/rive-app/rive-react/commit/29bd502208efa6928ffb47f06b5e548f071a8ade)
+- chore: release 0.0.12 [`6212844`](https://github.com/rive-app/rive-react/commit/621284482538d6b5a4cb16cf845c53528208b0bb)
 
 #### [v0.0.11](https://github.com/rive-app/rive-react/compare/v0.0.10...v0.0.11)
 

CONTRIBUTING.md

@@ -0,0 +1,74 @@
+# Contributing
+
+We love contributions! If you want to run the project locally to test out changes, run the examples, or just see how things work under the hood, read on below.
+
+## Local development
+
+This runtime consumes specific tied-down versions of the [JS/WASM runtime](https://github.com/rive-app/rive-wasm) to have better control over changes that occur in that downstream runtime.
+
+### Installation
+
+1. Clone the project down
+2. Run `npm i` in the shell/terminal at the base of the project to install the dependencies needed for the project
+
+### Local dev server
+
+To start the local dev server to reflect any changes made to the core `src/` files, run the following in a terminal tab:
+
+```
+npm run dev
+```
+
+### Running the example storybook locally
+
+We use Storybook to deploy our examples out onto a public-facing page for folks to view and see code examples for. It also serves as the place we'll include any example suites. These story files are stored in `examples/**.stories.mdx`. `.mdx` is an extension Storybook supports to support both `jsx` (React files) and `md` (markdown) in one file.
+
+To run Storybook, run the following command in the terminal:
+
+```
+npm run storybook
+```
+
+Any changes made in any files should reflect automatically, including the `.mdx` example files, and `src/` files.
+
+### Testing
+
+We also have a suite of unit tests against the high-level component and various hooks exported in the `test/` folder. When adding new components, changing the API, or underlying functionality, make sure to add a test here!
+
+To run the test suite:
+
+```
+npm test
+```
+
+## Making changes
+
+When you're ready to make changes, push up to a feature branch off of the `main` branch. Create a pull request to this repository in Github. When creating commit messages, please be as descriptive as possible to the changes being made.
+
+For example, if the change is simply a bug fix or patch change:
+
+```
+git commit -m "Fix: Fixing a return type from useRive"
+```
+
+Or if it's simply a docs change:
+
+```
+git commit -m "Docs: Adding a new link for another example page"
+```
+
+For minor/major version releases, also ensure you preface commit messages with:
+
+```
+git commit -m "Major: Restructuring the useRive API with new parameters"
+```
+
+These messages help make the changelog clear as to what changes are made for future devs to see.
+
+When pull requests are merged, the runtime will automatically deploy the next release version. By default, patch versions are published. If you want to set the next version as a minor/major version to be released, you have to manually update the `package.json` file at the root of the project to the verison you want it to.
+
+You can find the deploy scripts in `.github/`
+
+## Bumping the underlying JS/WASM runtime
+
+Many times, fixes to the runtime and feature adds come from the underlying JS/WASM runtime. In these cases, just bump the `@rive-app/canvas` and `@rive-app/webgl` versions to the verison you need to incorporate the fix/feature. Run `npm i` and test out the change locally against the Storybook examples and run the test suite to make sure nothing breaks, and then submit a PR with just the `package.json` change if that's all that's needed.

README.md

@@ -1,220 +1,79 @@
 ![Build Status](https://github.com/rive-app/rive-react/actions/workflows/tests.yml/badge.svg)
+[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://rive-app.github.io/rive-react)
 ![Discord badge](https://img.shields.io/discord/532365473602600965)
 ![Twitter handle](https://img.shields.io/twitter/follow/rive_app.svg?style=social&label=Follow)
 
 # Rive React
 
-React Runtime for [Rive](https://rive.app).
+![Rive hero image](https://cdn.rive.app/rive_logo_dark_bg.png)
 
-A wrapper around [Rive.js](https://github.com/rive-app/rive-wasm), providing full control over the js runtime while making it super simple to use in React applications.
+A React runtime library for [Rive](https://rive.app).
 
-Detailed runtime documentation can be found in [Rive's help center](https://help.rive.app/runtimes).
+This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-app/rive-wasm), giving full control over the js runtime while providing components and hooks for React applications.
 
-## Create and ship interactive animations to any platform
+## Table of contents
 
-[Rive](https://rive.app) is a real-time interactive design and animation tool. Use our collaborative editor to create motion graphics that respond to different states and user inputs. Then load your animations into apps, games, and websites with our lightweight open-source runtimes.
+- :star: [Rive Overview](#rive-overview)
+- 🚀 [Getting Started & API docs](#getting-started)
+- :mag: [Supported Versions](#supported-versions)
+- :books: [Examples](#examples)
+- :runner: [Migration Guides](#migration-guides)
+- 👨‍💻 [Contributing](#contributing)
+- :question: [Issues](#issues)
 
-## Installation
+## Rive overview
 
-There are two main variants of the React runtime:
+[Rive](https://rive.app) is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.
 
-1. **Recommended** Using [Canvas2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+:house_with_garden: [Homepage](https://rive.app/)
 
-```
-npm i --save @rive-app/react-canvas
-```
+:blue_book: [General help docs](https://rive.app/community/doc/)
 
-2. Using [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
+🛠 [Rive Forums](https://rive.app/community/forums/home)
 
-```
-npm i --save @rive-app/react-webgl
-```
+## Getting started
 
-Read more in our [web runtime docs](https://github.com/rive-app/rive-wasm/blob/master/WEB_RUNTIMES.md) around the differences. For most cases and smallest bundle size, we recommend using the `react-canvas` package.
+Follow along with the link below for a quick start in getting Rive React integrated into your React apps.
 
-_Note: This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._
+- [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)
 
-## Usage
+For more information, see the Runtime sections of the Rive help documentation:
 
-### Component
+- [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)
 
-Rive React provides a basic component as it's default import for displaying simple animations. Note that any animations or state machines instantiated through this component will autoplay.
+## Supported versions
 
-```js
-import Rive from '@rive-app/react-canvas';
-
-function Example() {
-  return <Rive src="loader.riv" />;
-}
-
-export default Example;
-```
-
-#### Props
-
-- `src`: File path or URL to the .riv file to display.
-- `artboard`: _(optional)_ Name to display.
-- `animations`: _(optional)_ Name or list of names of animtions to play.
-- `stateMachines`: _(optional)_ Name of state machine to play.
-- `layout`: _(optional)_ Layout object to define how animations are displayed on the canvas. See [Rive.js](https://github.com/rive-app/rive-wasm#layout) for more details.
-- _All attributes and eventHandlers that can be passed to a `canvas` element can also be passed to the `Rive` component and used in the same manner._
-
-#### Styles and Classes
-
-When rendering out a Rive component, in the DOM, it will show as a `<div>` element that contains the `<canvas>` element that powers the Rive animations. The purpose of the `<div>` element is to help control the sizing of the component. By default, the container has the following styles set on the `style` attribute:
-```css
-width: 100%;
-height: 100%;
-```
-
-If you decide to pass in a `className` to the Rive component, you will override these attributes, and you will need to either set these style attributes in your CSS associated with that `className`, or set your own sizing preferences. 
-
-### useRive Hook
-
-For more advanced usage, the `useRive` hook is provided. The hook will return a component and a [Rive.js](https://github.com/rive-app/rive-wasm) `Rive` object which gives you control of the current rive file.
-
-```js
-import { useRive } from '@rive-app/react-canvas';
-
-function Example() {
-  const params = {
-    src: 'loader.riv',
-    autoplay: false,
-  };
-  const { RiveComponent, rive } = useRive(params);
-
-  return (
-    <RiveComponent
-      onMouseEnter={() => rive && rive.play()}
-      onMouseLeave={() => rive && rive.pause()}
-    />
-  );
-}
-
-export default Example;
-```
-
-#### Parameters
-
-- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .riv file.
-- `opts`: Rive React specific options.
-
-#### Return Values
-
-- `RiveComponent`: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a `canvas` element.
-- `rive`: A Rive.js `Rive` object. This will return as null until the .riv file has fully loaded.
-- `canvas`: HTMLCanvasElement object, on which the .riv file is rendering.
-- `setCanvasRef`: A callback ref that can be passed to your own canvas element, if you wish to have control over the rendering of the Canvas element.
-- `setContainerRef`: A callback ref that can be passed to a container element that wraps the canvas element, if you which to have control over the rendering of the container element.
-  _For the vast majority of use cases, you can just the returned `RiveComponent` and don't need to worry about `setCanvasRef` and `setContainerRef`._
-
-#### riveParams
-
-- `src?`: _(optional)_ File path or URL to the .riv file to use. One of `src` or `buffer` must be provided.
-- `buffer?`: _(optional)_ ArrayBuffer containing the raw bytes from a .riv file. One of `src` or `buffer` must be provided.
-- `artboard?`: _(optional)_ Name of the artboard to use.
-- `animations?`: _(optional)_ Name or list of names of animations to play.
-- `stateMachines?`: _(optional)_ Name of list of names of state machines to load.
-- `layout?`: _(optional)_ Layout object to define how animations are displayed on the canvas. See [Rive.js](https://github.com/rive-app/rive-wasm#layout) for more details.
-- `autoplay?`: _(optional)_ If `true`, the animation will automatically start playing when loaded. Defaults to false.
-- `onLoad?`: _(optional)_ Callback that get's fired when the .rive file loads .
-- `onLoadError?`: _(optional)_ Callback that get's fired when an error occurs loading the .riv file.
-- `onPlay?`: _(optional)_ Callback that get's fired when the animation starts playing.
-- `onPause?`: _(optional)_ Callback that get's fired when the animation pauses.
-- `onStop?`: _(optional)_ Callback that get's fired when the animation stops playing.
-- `onLoop?`: _(optional)_ Callback that get's fired when the animation completes a loop.
-- `onStateChange?`: _(optional)_ Callback that get's fired when a state change occurs.
-
-#### opts
-
-- `useDevicePixelRatio`: _(optional)_ If `true`, the hook will scale the resolution of the animation based the [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). Defaults to `true`. NOTE: Requires the `setContainerRef` ref callback to be passed to a element wrapping a canvas element. If you use the `RiveComponent`, then this will happen automatically.
-- `fitCanvasToArtboardHeight`: _(optional)_ If `true`, then the canvas will resize based on the height of the artboard. Defaults to `false`.
-- `useOffscreenRenderer`: _(optional)_ If `true`, the Rive instance will share (or create if one does not exist) an offscreen `WebGL` context. This allows you to display multiple Rive animations on one screen to work around some browser limitations regarding multiple concurrent WebGL contexts. If `false`, each Rive instance will have its own dedicated `WebGL` context, and you may need to be cautious of the browser limitations just mentioned. Defaults to `true`.
-
-### useStateMachineInput Hook
-
-The `useStateMachineInput` hook is provided to make it easier to interact with state machine inputs on a rive file.
-
-```js
-import { useRive, useStateMachineInput } from '@rive-app/react-canvas';
-
-function Example() {
-  const STATE_MACHINE_NAME = 'button';
-  const INPUT_NAME = 'onClick';
-
-  const { RiveComponent, rive } = useRive({
-    src: 'button.riv',
-    stateMachines: STATE_MACHINE_NAME,
-    autoplay: true,
-  });
-
-  const onClickInput = useStateMachineInput(
-    rive,
-    STATE_MACHINE_NAME,
-    INPUT_NAME
-  );
-
-  // This example is using a state machine with a trigger input.
-  return <RiveComponent onClick={() => onClickInput.fire()} />;
-}
-
-export default Example;
-```
-
-See our [examples](examples) folder for working examples of [Boolean](examples/state-machine-boolean-input) and [Number](examples/state-machine-number-input) inputs.
-
-#### Parameters
-
-- `rive`: A `Rive` object. This is returned by the `useRive` hook.
-- `stateMachineName`: Name of the state machine.
-- `inputName`: Name of the state machine input.
-- `initialValue`: Initial value to set on a state machine input when it's loaded in, for number or boolean inputs. **Note** that this may trigger any transitional animations between the initial state and any next states that depend on the input this `initialValue` is being set to. If this is problematic or conflicting for your case, we recommend setting the true initial value of the input on your state machine in the Rive editor. 
-
-#### Return Value
-
-A Rive.js `stateMachineInput` object.
+This library supports React versions `^16.8.0` through `^18.0.0`.
 
 ## Examples
 
-This project uses [Storybook](https://storybook.js.org/) to build examples and API documentation. Check it out at:
-https://rive-app.github.io/rive-react. To run locally, simply run `npm run storybook`.
+Check out our Storybook instance that shows how to use the library in small examples, along with code snippets! This includes examples using the basic component, as well as the convenient hooks exported to take advantage of state machines.
 
-## Migration notes
+- [Example page](https://rive-app.github.io/rive-react)
+- [Login screen w/ input tracking](https://rive-app.github.io/rive-use-cases/?path=/story/example-loginformcomponent--primary)
+- [Mouse tracking](https://codesandbox.io/s/rive-mouse-track-test-t0y965?file=/src/App.js)
+- [Accessibility concerns](https://rive.app/blog/accesible-web-animations-aria-live-regions)
 
-### Migrating from version 0.0.x to 1.x.x
+### Awesome Rive
 
-Starting in v 1.0.0, we've migrated from wrapping around the `@rive-app/canvas` runtime (which uses the `CanvasRendereringContext2D` renderer) to the `@rive-app/webgl` runtime (which uses the WebGL renderer). The high-level API doesn't require any change to upgrade, but there are some notes to consider about the backing renderer.
+For even more examples and resources on using Rive at runtime or in other tools, checkout the [awesome-rive](https://github.com/rive-app/awesome-rive) repo.
 
-The backing `WebGL` runtime allows for best performance across all devices, as well as support for some features that are not supported in the `canvas` renderer runtime. To allow the `react` runtime to support some of the newer features in Rive, we needed to switch the `rive-react` backing runtime to `@rive-app/webgl`. 
+## Migration guides
 
-One note about this switch is that some browsers may limit the number of concurrent WebGL contexts. For example, Chrome may only support up to 16 contexts concurrently. We pass a property called `useOffscreenRenderer` set to true to the backing runtime when instantiating Rive by default, which helps to manage the lifecycle of the `canvas` with a single offscreen `WebGL` context, even if there are many Rive animations on the screen (i.e 16+). If you need a single `WebGL` context per Rive animation/instance, pass in the `useOffscreenRenderer` property set to `false` in the `useRive` options, or as a prop in the default export component from this runtime. See below for an example:
+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!
 
-```js
-const {rive, RiveComponent} = useRive({
-  src: 'foo.riv',
-}, {
-  // Default (you don't need to set this)
-  useOffscreenRenderer: true,
-  // To override and use one context per Rive instance, uncomment and use the line below
-  // useOffscreenRenderer: false,
-});
+[Migration guides](https://rive.app/community/doc/migrating-from-v3-to-v4/dociIPXVHKFF)
 
-// or you can override the flag in JSX via props
-return (
-  <Rive src="foo.riv" useOffscreenRenderer={false} />
-);
-```
+## Contributing
 
-### Migrating from version 1.x.x to 2.x.x
+We love contributions! Check out our [contributing docs](./CONTRIBUTING.md) to get more details into how to run this project, the examples, and more all locally.
 
-#### Package split
+## Issues
 
-In most cases, you may be able to migrate safely. We are mainly enabling the React runtime to work with both backing renderers `@rive-app/webgl` and `@rive-app/canvas`, such that you can use either `@rive-app/react-canvas` or `@rive-app/react-webgl` as the dependency in your React applications. Another change that is mostly internal is that by default, `rive-react` will now use `@rive-app/canvas` (as opposed to `@rive-app/webgl`) to wrap around, as it currently yields the fastest performance across devices. Therefore, **we recommend installing `@rive-app/react-canvas` in your applicaions**. However, if you need a WebGL backing renderer, you may want to use `@rive-app/react-webgl`.
-
-#### Classes, styles, and component props
-Starting in v2.0, we introduce one breaking change where any non-style props set on the `RiveComponent` (i.e `aria-*`, `role`, etc.) will be set on the inner `<canvas>` element. Previously, all extra props would be set onto the containing `<div>` element. Both the `className` and `style` props will continue to be set on the `<div>` element that wraps the canvas, as this dictates the sizing of the Rive component.
-
-
-### Migrating to 3.0
-
-There are no breaking changes here. If you have migrated to v2.x.x, you can safely migrate to 3.0.
+Have an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our [issues](https://github.com/rive-app/rive-react/issues) tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.

examples/stories/RiveOverview.stories.mdx

@@ -4,8 +4,8 @@ import { useState } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-import RiveComponent, {useRive, useStateMachineInput} from '../../src';
-import {Button} from './components/Button';
+import RiveComponent, { useRive, useStateMachineInput } from '../../src';
+import { Button } from './components/Button';
 import './rive-overview.css';
 
 <Meta title="React Runtime/Overview" />
@@ -31,6 +31,7 @@ There's multiple ways to render Rive using the React runtime. See the associated
 ```tsx
 import RiveComponent from '@rive-app/react-canvas';
 ```
+
 The React runtime exports a default React component you can insert as JSX. Under the hood, it renders a `<canvas>` element that runs the animation, and a wrapping `<div>` element that handles sizing of the canvas based on the parent that wraps the component.
 
 **When to use this**: Use this for simple rendering cases where you don't need to control playback or setup state machine inputs to advance state machines. It will simply autoplay the first animation it finds in the `.riv`, the animation name you provide it, or the state machine name if you provide one.
@@ -56,12 +57,13 @@ In addition to the props laid out below, the component accepts other props that
 ### useRive Hook
 
 ```tsx
-import {useRive} from '@rive-app/react-canvas';
+import { useRive } from '@rive-app/react-canvas';
 ```
 
 The runtime also exports a named `useRive` hook that allows for more control at Rive instantiation, since it passes back a `rive` object you can use to manipulate state machines, control playback, and more.
 
 **When to use this:** When you need to control your Rive animation in any aspect, such as controlling playback, using state machine inputs to advance state machines, add adding callbacks on certain Rive-specific events such as `onStateChange`, `onPause`, etc.
+
 <Canvas withSource="open">
   <Story name="useRive Hook">
     {() => {
@@ -69,7 +71,7 @@ The runtime also exports a named `useRive` hook that allows for more control at
       const [animationText, setAnimationText] = useState('');
       const { rive, RiveComponent: RiveComponentPlayback } = useRive({
         src: 'truck.riv',
-        stateMachines: "drive",
+        stateMachines: 'drive',
         artboard: 'Truck',
         autoplay: true,
         onPause: () => {
@@ -88,15 +90,19 @@ The runtime also exports a named `useRive` hook that allows for more control at
           setIsPlaying(true);
         }
       };
-      return ((
+      return (
         <>
           <div className="center">
-            <RiveComponentPlayback className="base-canvas-size" />
+            <RiveComponentPlayback className="base-canvas-size">
+              <p>Animation that can be paused and played by clicking on it</p>
+            </RiveComponentPlayback>
             <p>{animationText}</p>
-            <Button onClick={togglePlaying}>{isPlaying ? 'Pause' : 'Play'}</Button>
+            <Button onClick={togglePlaying}>
+              {isPlaying ? 'Pause' : 'Play'}
+            </Button>
           </div>
         </>
-      ));
+      );
     }}
   </Story>
 </Canvas>

examples/stories/StateMachineDocs.stories.mdx

@@ -1,20 +1,25 @@
 <!-- RiveTestHook.stories.mdx -->
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-import RiveComponent, {useRive, useStateMachineInput} from '../../src';
-import {Button} from './components/Button';
+import RiveComponent, {
+  EventType,
+  useRive,
+  useStateMachineInput,
+} from '../../src';
+import { Button } from './components/Button';
 import './rive-overview.css';
 
 <Meta title="React Runtime/State Machines" />
 
 # 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:
+
 - Booleans
 - Numbers
 - Triggers
@@ -90,8 +95,8 @@ Once you grab a reference to the state machine input, you can get/set the value
 <Canvas withSource="open">
   <Story name="Number input">
     {() => {
-      const STATE_MACHINE_NAME = 'State Machine ';
-      const INPUT_NAME = 'Level';
+      const STATE_MACHINE_NAME = 'skill-controller';
+      const INPUT_NAME = 'level';
       const { rive, RiveComponent: RiveComponentTouch } = useRive({
         src: 'skills.riv',
         stateMachines: STATE_MACHINE_NAME,
@@ -101,7 +106,11 @@ Once you grab a reference to the state machine input, you can get/set the value
       // levelInput is a number state machine input. To transition the state machine,
       // we need to set the value to a number. For this state machine input, we need
       // to set to 0, 1 or 2 for a state transition to occur.
-      const levelInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME);
+      const levelInput = useStateMachineInput(
+        rive,
+        STATE_MACHINE_NAME,
+        INPUT_NAME
+      );
       return (
         // The animation will fit to the parent element, so we set a large height
         // and width for this example.
@@ -155,3 +164,59 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg
     }}
   </Story>
 </Canvas>
+
+## Rive Text
+
+A simple example showing Rive Text rendering. Note that if you are using the `@rive-app/react-canvas-lite` package,
+the Rive Text bit will not render on the graphic, however, the rest of the Rive content should without issue.
+
+<Canvas withSource="open">
+  <Story name="Rive Text">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const { rive, RiveComponent } = useRive({
+        src: 'text_test.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        autoplay: true,
+        automaticallyHandleEvents: true,
+      });
+      return (
+        <div className="center">
+          <RiveComponent className="base-canvas-size" />
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Rive Events
+
+To listen for Rive Events reported during state machine play, use the `on` API to add an event listener.
+
+<Canvas withSource="open">
+  <Story name="Rive Events">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const { rive, RiveComponent } = useRive({
+        src: 'rating_animation.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        autoplay: true,
+        automaticallyHandleEvents: true,
+      });
+      useEffect(() => {
+        if (rive) {
+          rive.on(EventType.RiveEvent, onRiveEventReceived);
+        }
+      }, [rive]);
+      const onRiveEventReceived = (riveEvent) => {
+        console.log('Rive Event Fired', riveEvent);
+      };
+      return (
+        <div className="center">
+          <RiveComponent className="base-canvas-size" />
+          <p>Click on the 5 star!</p>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>

npm/react-canvas-lite/README.md

@@ -0,0 +1,9 @@
+# @rive-app/react-canvas-lite
+
+Output for `rive-react` using the backing `@rive-app/canvas-lite` JS runtime.
+
+## Why Lite?
+
+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 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

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-canvas-lite",
+  "version": "4.14.6",
+  "description": "React wrapper around the @rive-app/canvas-lite library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/canvas-lite": "2.21.7"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}

npm/react-canvas/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-canvas",
+  "version": "4.14.6",
+  "description": "React wrapper around the @rive-app/canvas library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/canvas": "2.21.7"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}

npm/react-webgl/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-webgl",
+  "version": "4.14.6",
+  "description": "React wrapper around the @rive-app/webgl library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/webgl": "2.21.7"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}

npm/react-webgl2/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-webgl2",
+  "version": "4.14.6",
+  "description": "React wrapper around the @rive-app/webgl2 library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/webgl2": "2.21.7"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "3.0.15",
+  "version": "4.14.6",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -16,7 +16,14 @@
     "types:check": "tsc --noEmit",
     "release": "release-it",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o docs-build"
+    "build-storybook": "build-storybook -o docs-build",
+    "release:patch": "npm run release -- --ci",
+    "release:minor": "npm run release -- minor --ci",
+    "release:major": "npm run release -- major --ci",
+    "setup-builds": "./scripts/build.sh",
+    "setup-packages": "./scripts/setup_all_packages.sh",
+    "bump-versions": "./scripts/bump_all_versions.sh $npm_package_version",
+    "publish:all": "./scripts/publish_all.sh --access public"
   },
   "repository": {
     "type": "git",
@@ -29,8 +36,10 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "1.0.71",
-    "@rive-app/webgl": "1.0.68"
+    "@rive-app/canvas": "2.21.7",
+    "@rive-app/canvas-lite": "2.21.7",
+    "@rive-app/webgl": "2.21.7",
+    "@rive-app/webgl2": "2.21.7"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -65,6 +74,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.5.12",
     "jest": "^27.0.4",
     "prettier": "^2.3.1",

scripts/build.sh

@@ -5,6 +5,8 @@ set -e
 # Copy the build to each react-variant build for npm release
 cp -r ./dist ./npm/react-webgl
 cp -r ./dist ./npm/react-canvas
+cp -r ./dist ./npm/react-canvas-lite
+cp -r ./dist ./npm/react-webgl2
 
 echo "Replacing the canvas with webgl references in react-webgl"
 pushd ./npm/react-webgl/dist
@@ -16,3 +18,25 @@ else
   find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
 fi
 popd
+
+echo "Replacing the canvas with webgl2 references in react-webgl2"
+pushd ./npm/react-webgl2/dist
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+else
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+fi
+popd
+
+echo "Replacing the canvas with canvas-lite references in react-canvas-lite"
+pushd ./npm/react-canvas-lite/dist
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+else
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+fi
+popd

scripts/bump_all_versions.sh

@@ -1,11 +0,0 @@
-#!/bin/bash
-set -e
-
-# Bump the version number of every npm module in the npm folder.
-for dir in ./npm/*; do
-    pushd $dir > /dev/null
-    repo_name=`echo $dir | sed 's:.*/::' | sed 's/_/-/g'`
-    echo Bumping version of $repo_name
-    ../../scripts/bump_version.sh $repo_name $RELEASE_VERSION
-    popd > /dev/null
-done

scripts/bump_version.sh

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# Bumps the version of a single npm module found in the current working
-# directory. Call bump_version.sh from the path with package.json in it.
-
-set -e
-SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
-# RELEASE_VERSION will come from an env variable passed in from the GH action workflow
-node $SCRIPT_DIR/nextVersion.js "$RELEASE_VERSION" `pwd`
-
-# Replace the dist package json with the newly trimmed one
-cp -f ./package.json ./dist/package.json

scripts/nextVersion.js

@@ -1,33 +0,0 @@
-const fs = require('fs');
-const path = process.argv[3];
-const package = require(path + '/package.json');
-const currentVersion = package.version;
-const nextVersion = process.argv[2].trim().replace(/\'/g, '"');
-
-if (!nextVersion || nextVersion === currentVersion) {
-  throw new Error('Next version is not defined or is a version that already exists');
-}
-
-// Returns -1 if first is less than second, 1 if first is greater than second, otherwise 0 if equal.
-function compareVersion(first, second) {
-  // Assumption: only numbers in our versions.
-  const firstParts = first.split('.').map((value) => parseInt(value));
-  const secondParts = second.split('.').map((value) => parseInt(value));
-
-  for (let i = 0; i < Math.max(firstParts.length, secondParts.length); i++) {
-    const first = i < firstParts.length ? firstParts[i] : 0;
-    const second = i < secondParts.length ? secondParts[i] : 0;
-    if (first < second) {
-        return -1;
-    }
-    if (second < first) {
-        return 1;
-    }
-  }
-  return 0;
-}
-
-if (compareVersion(currentVersion, nextVersion) <= 0) {
-  package.version = nextVersion;
-  fs.writeFileSync(path + '/package.json', JSON.stringify(package, null, 2));
-}

scripts/publish_all.sh

@@ -5,6 +5,6 @@ set -e
 for dir in ./npm/*; do
     pushd $dir > /dev/null
     echo Publishing `echo $dir | sed 's:.*/::'`
-    npm publish --access public
+    npm publish $@
     popd > /dev/null
 done

scripts/setup_all_packages.sh

@@ -3,14 +3,17 @@ set -e
 
 echo "Copying package.json to rive-react npm package folders"
 
-cp package.json npm/react-canvas
-cp package.json npm/react-webgl
-
 # Bump the version number of every npm module in the npm folder.
 for dir in ./npm/*; do
     echo $dir
     pushd $dir > /dev/null
     echo $dir
+    if [ -f "./package.json" ]; then
+        echo "Removing existing package.json..."
+        rm "./package.json"
+        echo "package.json deleted from $dir"
+    fi
+    cp ../../package.json ./
     repo_name=`echo $dir | sed 's:.*/::' | sed 's/_/-/g'`
     echo Setting package.json on npm packages
     echo $repo_name

scripts/trimPackageJson.js

@@ -1,7 +1,8 @@
 const fs = require('fs');
 const path = process.argv[2];
 const npmPackageSplit = process.argv[3].split('-');
-const renderer = npmPackageSplit[npmPackageSplit.length - 1];
+// extracts "webgl" or "canvas-lite" from the npm package name
+const renderer = npmPackageSplit.slice(1).join('-');
 const package = require(path + '/package.json');
 
 function trimNpmPackage() {

src/components/Rive.tsx

@@ -21,14 +21,34 @@ 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;
   /**
    * For `@rive-app/react-webgl`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page.
    */
   useOffscreenRenderer?: boolean;
-};
+  /**
+   * Specify whether to disable Rive listeners on the canvas, thus preventing any event listeners to be attached to the canvas element
+   */
+  shouldDisableRiveListeners?: boolean;
+  /**
+   * Specify whether to resize the canvas to its container automatically
+   */
+  shouldResizeCanvasToContainer?: boolean;
+  /**
+   * Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
+   * functionality that can be invoked implicitly when detected.
+   *
+   * For example, if during the render loop an OpenUrlEvent is detected, the
+   * browser may try to open the specified URL in the payload.
+   *
+   * This flag is false by default to prevent any unwanted behaviors from taking place.
+   * This means any special Rive Event will have to be handled manually by subscribing to
+   * EventType.RiveEvent
+   */
+  automaticallyHandleEvents?: boolean;
+}
 
 const Rive = ({
   src,
@@ -37,6 +57,10 @@ const Rive = ({
   stateMachines,
   layout,
   useOffscreenRenderer = true,
+  shouldDisableRiveListeners = false,
+  shouldResizeCanvasToContainer = true,
+  automaticallyHandleEvents = false,
+  children,
   ...rest
 }: RiveProps & ComponentProps<'canvas'>) => {
   const params = {
@@ -46,14 +70,17 @@ const Rive = ({
     layout,
     stateMachines,
     autoplay: true,
+    shouldDisableRiveListeners,
+    automaticallyHandleEvents,
   };
 
   const options = {
     useOffscreenRenderer,
+    shouldResizeCanvasToContainer,
   };
 
   const { RiveComponent } = useRive(params, options);
-  return <RiveComponent {...rest} />;
+  return <RiveComponent {...rest}>{children}</RiveComponent>;
 };
 
 export default Rive;

src/hooks/elementObserver.ts

@@ -0,0 +1,38 @@
+class FakeIntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+const MyIntersectionObserver =
+  globalThis.IntersectionObserver || FakeIntersectionObserver;
+
+class ElementObserver {
+  private observer;
+
+  private elementsMap: Map<Element, Function> = new Map();
+
+  constructor() {
+    this.observer = new MyIntersectionObserver(this.onObserved);
+  }
+  public onObserved = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      const elementCallback = this.elementsMap.get(entry.target as Element);
+      if (elementCallback) {
+        elementCallback(entry);
+      }
+    });
+  };
+
+  public registerCallback(element: Element, callback: Function) {
+    this.observer.observe(element);
+    this.elementsMap.set(element, callback);
+  }
+
+  public removeCallback(element: Element) {
+    this.observer.unobserve(element);
+    this.elementsMap.delete(element);
+  }
+}
+
+export default ElementObserver;

src/hooks/useContainerSize.ts

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import { Dimensions } from '../types';
+
+// There are polyfills for this, but they add hundreds of lines of code
+class FakeResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function throttle(f: Function, delay: number) {
+  let timer = 0;
+  return function (this: Function, ...args: any) {
+    clearTimeout(timer);
+    timer = window.setTimeout(() => f.apply(this, args), delay);
+  };
+}
+
+const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
+const hasResizeObserver = globalThis.ResizeObserver !== undefined;
+
+const useResizeObserver = hasResizeObserver;
+const useWindowListener = !useResizeObserver;
+
+/**
+ * Hook to listen for a ref element's resize events being triggered. When resized,
+ * it sets state to an object of {width: number, height: number} indicating the contentRect
+ * size of the element at the new resize.
+ *
+ * @param containerRef - Ref element to listen for resize events on
+ * @returns - Size object with width and height attributes
+ */
+export default function useSize(
+  containerRef: React.MutableRefObject<HTMLElement | null>,
+  shouldResizeCanvasToContainer = true
+) {
+  const [size, setSize] = useState<Dimensions>({
+    width: 0,
+    height: 0,
+  });
+
+  // internet explorer does not support ResizeObservers.
+  useEffect(() => {
+    if (typeof window !== 'undefined' && shouldResizeCanvasToContainer) {
+      const handleResize = () => {
+        setSize({
+          width: window.innerWidth,
+          height: window.innerHeight,
+        });
+      };
+
+      if (useWindowListener) {
+        // only pay attention to window size changes when we do not have the resizeObserver (IE only)
+        handleResize();
+        window.addEventListener('resize', handleResize);
+      }
+
+      return () => window.removeEventListener('resize', handleResize);
+    }
+  }, []);
+  const observer = useRef(
+    new MyResizeObserver(
+      throttle((entries: any) => {
+        if (useResizeObserver) {
+          setSize({
+            width: entries[entries.length - 1].contentRect.width,
+            height: entries[entries.length - 1].contentRect.height,
+          });
+        }
+      }, 0)
+    )
+  );
+
+  useEffect(() => {
+    const currentObserver = observer.current;
+    if (!shouldResizeCanvasToContainer) {
+      currentObserver.disconnect();
+      return;
+    }
+    const containerEl = containerRef.current;
+    if (containerRef.current && useResizeObserver) {
+      currentObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      currentObserver.disconnect();
+      if (containerEl && useResizeObserver) {
+        currentObserver.unobserve(containerEl);
+      }
+    };
+  }, [containerRef, observer]);
+
+  return size;
+}

src/hooks/useDevicePixelRatio.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+/**
+ * Listen for devicePixelRatio changes and set the new value accordingly. This could
+ * happen for reasons such as:
+ * - User moves window from retina screen display to a separate monitor
+ * - User controls zoom settings on the browser
+ *
+ * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
+ *
+ * @param customDevicePixelRatio - Number to force a dpr to abide by, rather than using the window's
+ *
+ * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
+ */
+export default function useDevicePixelRatio(customDevicePixelRatio?: number) {
+  const dpr = customDevicePixelRatio || getDevicePixelRatio();
+  const [currentDpr, setCurrentDpr] = useState(dpr);
+
+  useEffect(() => {
+    const canListen = typeof window !== 'undefined' && 'matchMedia' in window;
+    if (!canListen) {
+      return;
+    }
+
+    const updateDpr = () => {
+      const newDpr = customDevicePixelRatio || getDevicePixelRatio();
+      setCurrentDpr(newDpr);
+    };
+    const mediaMatcher = window.matchMedia(
+      `screen and (resolution: ${currentDpr}dppx)`
+    );
+    mediaMatcher.hasOwnProperty('addEventListener')
+      ? mediaMatcher.addEventListener('change', updateDpr)
+      : mediaMatcher.addListener(updateDpr);
+
+    return () => {
+      mediaMatcher.hasOwnProperty('removeEventListener')
+        ? mediaMatcher.removeEventListener('change', updateDpr)
+        : mediaMatcher.removeListener(updateDpr);
+    };
+  }, [currentDpr, customDevicePixelRatio]);
+
+  return currentDpr;
+}
+
+function getDevicePixelRatio(): number {
+  const hasDprProp =
+    typeof window !== 'undefined' &&
+    typeof window.devicePixelRatio === 'number';
+  const dpr = hasDprProp ? window.devicePixelRatio : 1;
+  return Math.min(Math.max(1, dpr), 3);
+}

src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import ElementObserver from './elementObserver';
+
+let observer: ElementObserver;
+const getObserver = () => {
+  if(!observer) {
+    observer = new ElementObserver();
+  }
+  return observer;
+}
+
+/**
+ * Hook to observe elements when they are intersecting with the viewport
+ *
+ * @returns - API to observer and unobserve elements
+ */
+export default function useIntersectionObserver() {
+  const observe = useCallback((element: Element, callback: Function) => {
+    const observer = getObserver();
+    observer.registerCallback(element, callback);
+  }, []);
+
+  const unobserve = useCallback((element: Element) => {
+    const observer = getObserver();
+    observer.removeCallback(element);
+  }, []);
+
+  return {
+    observe,
+    unobserve,
+  };
+}

src/hooks/useResizeCanvas.ts

@@ -0,0 +1,195 @@
+import { useEffect, useState, MutableRefObject, useCallback } from 'react';
+import { Bounds } from '@rive-app/canvas';
+import { Dimensions, UseRiveOptions } from '../types';
+import useDevicePixelRatio from './useDevicePixelRatio';
+import useContainerSize from './useContainerSize';
+import { getOptions } from '../utils';
+
+interface UseResizeCanvasProps {
+  /**
+   * Whether or not Rive is loaded and renderer is associated with the canvas
+   */
+  riveLoaded: boolean;
+  /**
+   * Ref to the canvas element
+   */
+  canvasElem: HTMLCanvasElement | null;
+  /**
+   * Ref to the container element of the canvas
+   */
+  containerRef: MutableRefObject<HTMLElement | null>;
+  /**
+   * (Optional) Callback to be invoked after the canvas has been resized due to a resize
+   * of its parent container. This is where you would want to reset the layout
+   * dimensions for the Rive renderer to dictate the new min/max bounds of the
+   * canvas.
+   *
+   * Using the high-level JS runtime, this might be a simple call to `rive.resizeToCanvas()`
+   * Using the low-level JSruntime, this might be invoking the renderer's `.align()` method
+   * with the Layout and min/max X/Y values of the canvas.
+   *
+   * @returns void
+   */
+  onCanvasHasResized?: () => void;
+  /**
+   * (Optional) Options passed to the useRive hook, including the shouldResizeCanvasToContainer option
+   * which prevents the canvas element from resizing to its parent container
+   */
+  options?: Partial<UseRiveOptions>;
+  /**
+   * (Optional) AABB bounds of the artboard. If provided, the canvas will be sized to the artboard
+   * height if the fitCanvasToArtboardHeight option is true.
+   */
+  artboardBounds?: Bounds;
+}
+
+/**
+ * Helper hook to listen for changes in the <canvas> parent container size and size the <canvas>
+ * to match. If a resize event has occurred, a supplied callback (onCanvasHasResized)
+ * will be inokved to allow for any re-calculation needed (i.e. Rive layout on the canvas).
+ *
+ * This hook is useful if you are not intending to use the `useRive` hook yourself, but still
+ * want to use the auto-sizing logic on the canvas/container.
+ *
+ * @param props - Object to supply necessary props to the hook
+ */
+export default function useResizeCanvas({
+  riveLoaded = false,
+  canvasElem,
+  containerRef,
+  options = {},
+  onCanvasHasResized,
+  artboardBounds,
+}: UseResizeCanvasProps) {
+  const presetOptions = getOptions(options);
+  const [
+    { height: lastContainerHeight, width: lastContainerWidth },
+    setLastContainerDimensions,
+  ] = useState<Dimensions>({
+    height: 0,
+    width: 0,
+  });
+  const [
+    { height: lastCanvasHeight, width: lastCanvasWidth },
+    setLastCanvasSize,
+  ] = useState<Dimensions>({
+    height: 0,
+    width: 0,
+  });
+
+  const [isFirstSizing, setIsFirstSizing] = useState(true);
+
+  const {
+    fitCanvasToArtboardHeight,
+    shouldResizeCanvasToContainer,
+    useDevicePixelRatio: shouldUseDevicePixelRatio,
+    customDevicePixelRatio,
+  } = presetOptions;
+
+  const containerSize = useContainerSize(
+    containerRef,
+    shouldResizeCanvasToContainer
+  );
+  const currentDevicePixelRatio = useDevicePixelRatio(customDevicePixelRatio);
+
+  const { maxX, maxY } = artboardBounds ?? {};
+
+  const getContainerDimensions = useCallback(() => {
+    const width = containerRef.current?.clientWidth ?? 0;
+    const height = containerRef.current?.clientHeight ?? 0;
+    if (fitCanvasToArtboardHeight && artboardBounds) {
+      const { maxY, maxX } = artboardBounds;
+      return { width, height: width * (maxY / maxX) };
+    }
+    return {
+      width,
+      height,
+    };
+  }, [containerRef, fitCanvasToArtboardHeight, maxX, maxY]);
+
+  useEffect(() => {
+    // If Rive is not ready, the container is not ready, or the user supplies a flag
+    // to not resize the canvas to the container, then return early
+    if (
+      !shouldResizeCanvasToContainer ||
+      !containerRef.current ||
+      !riveLoaded
+    ) {
+      return;
+    }
+
+    const { width, height } = getContainerDimensions();
+    let hasResized = false;
+    if (canvasElem) {
+      // Check if the canvas parent container bounds have changed and set
+      // new values accordingly
+      const boundsChanged =
+        width !== lastContainerWidth || height !== lastContainerHeight;
+      if (presetOptions.fitCanvasToArtboardHeight && boundsChanged) {
+        containerRef.current.style.height = height + 'px';
+        hasResized = true;
+      }
+      if (presetOptions.useDevicePixelRatio) {
+        // Check if devicePixelRatio may have changed and get new canvas
+        // width/height values to set the size
+        const canvasSizeChanged =
+          width * currentDevicePixelRatio !== lastCanvasWidth ||
+          height * currentDevicePixelRatio !== lastCanvasHeight;
+        if (boundsChanged || canvasSizeChanged) {
+          const newCanvasWidthProp = currentDevicePixelRatio * width;
+          const newCanvasHeightProp = currentDevicePixelRatio * height;
+          canvasElem.width = newCanvasWidthProp;
+          canvasElem.height = newCanvasHeightProp;
+          canvasElem.style.width = width + 'px';
+          canvasElem.style.height = height + 'px';
+          setLastCanvasSize({
+            width: newCanvasWidthProp,
+            height: newCanvasHeightProp,
+          });
+          hasResized = true;
+        }
+      } else if (boundsChanged) {
+        canvasElem.width = width;
+        canvasElem.height = height;
+        setLastCanvasSize({
+          width: width,
+          height: height,
+        });
+        hasResized = true;
+      }
+      setLastContainerDimensions({ width, height });
+    }
+
+    // Callback to perform any Rive-related actions after resizing the canvas
+    // (i.e., reset the Rive layout in the render loop)
+    if (onCanvasHasResized && (isFirstSizing || hasResized)) {
+      onCanvasHasResized && onCanvasHasResized();
+    }
+    isFirstSizing && setIsFirstSizing(false);
+  }, [
+    canvasElem,
+    containerRef,
+    containerSize,
+    currentDevicePixelRatio,
+    getContainerDimensions,
+    isFirstSizing,
+    setIsFirstSizing,
+    lastCanvasHeight,
+    lastCanvasWidth,
+    lastContainerHeight,
+    lastContainerWidth,
+    onCanvasHasResized,
+    shouldResizeCanvasToContainer,
+    fitCanvasToArtboardHeight,
+    shouldUseDevicePixelRatio,
+    riveLoaded,
+  ]);
+
+  // Reset width and height values when the canvas changes
+  useEffect(() => {
+    setLastCanvasSize({
+      width: 0,
+      height: 0,
+    });
+  }, [canvasElem]);
+}

src/hooks/useRive.tsx

@@ -7,13 +7,10 @@ import React, {
   RefCallback,
 } from 'react';
 import { Rive, EventType } from '@rive-app/canvas';
-import {
-  UseRiveParameters,
-  UseRiveOptions,
-  RiveState,
-  Dimensions,
-} from '../types';
-import { useWindowSize } from '../utils';
+import { UseRiveParameters, UseRiveOptions, RiveState } from '../types';
+import useResizeCanvas from './useResizeCanvas';
+import { getOptions } from '../utils';
+import useIntersectionObserver from './useIntersectionObserver';
 
 type RiveComponentProps = {
   setContainerRef: RefCallback<HTMLElement>;
@@ -25,6 +22,7 @@ function RiveComponent({
   setCanvasRef,
   className = '',
   style,
+  children,
   ...rest
 }: RiveComponentProps & ComponentProps<'canvas'>) {
   const containerStyle = {
@@ -39,27 +37,17 @@ function RiveComponent({
       className={className}
       {...(!className && { style: containerStyle })}
     >
-      <canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} {...rest} />
+      <canvas
+        ref={setCanvasRef}
+        style={{ verticalAlign: 'top', width: 0, height: 0 }}
+        {...rest}
+      >
+        {children}
+      </canvas>
     </div>
   );
 }
 
-const defaultOptions = {
-  useDevicePixelRatio: true,
-  fitCanvasToArtboardHeight: false,
-  useOffscreenRenderer: true,
-};
-
-/**
- * Returns options, with defaults set.
- *
- * @param opts
- * @returns
- */
-function getOptions(opts: Partial<UseRiveOptions>) {
-  return Object.assign({}, defaultOptions, opts);
-}
-
 /**
  * Custom Hook for loading a Rive file.
  *
@@ -78,113 +66,73 @@ export default function useRive(
   riveParams?: UseRiveParameters,
   opts: Partial<UseRiveOptions> = {}
 ): RiveState {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [canvasElem, setCanvasElem] = useState<HTMLCanvasElement | null>(null);
   const containerRef = useRef<HTMLElement | null>(null);
-  const [rive, setRive] = useState<Rive | null>(null);
-  const [dimensions, setDimensions] = useState<Dimensions>({
-    height: 0,
-    width: 0,
-  });
 
-  // Listen to changes in the window sizes and update the bounds when changes
-  // occur.
-  const windowSize = useWindowSize();
+  const [rive, setRive] = useState<Rive | null>(null);
 
   const isParamsLoaded = Boolean(riveParams);
   const options = getOptions(opts);
 
   /**
-   * Gets the intended dimensions of the canvas element.
-   *
-   * The intended dimensions are those of the container element, unless the
-   * option `fitCanvasToArtboardHeight` is true, then they are adjusted to
-   * the height of the artboard.
-   *
-   * @returns Dimensions object.
+   * 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
    */
-  function getCanvasDimensions() {
-    const { width, height } =
-      containerRef.current?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0);
-
-    if (rive && options.fitCanvasToArtboardHeight) {
-      const { maxY, maxX } = rive.bounds;
-      return { width, height: width * (maxY / maxX) };
-    }
-    return { width, height };
-  }
-
-  /**
-   * Updates the width and height of the canvas.
-   */
-  function updateBounds() {
-    if (!containerRef.current) {
-      return;
-    }
-
-    const { width, height } = getCanvasDimensions();
-    const boundsChanged =
-      width !== dimensions.width || height !== dimensions.height;
-    if (canvasRef.current && rive && boundsChanged) {
-      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;
-        canvasRef.current.style.width = width + 'px';
-        canvasRef.current.style.height = height + 'px';
-      } else {
-        canvasRef.current.width = width;
-        canvasRef.current.height = height;
-      }
-      setDimensions({ width, height });
-
-      // Updating the canvas width or height will clear the canvas, so call
-      // startRendering() to redraw the current frame as the animation might
-      // be paused and not advancing.
-      rive.startRendering();
-    }
-
-    // Always resize to Canvas
+  const onCanvasHasResized = useCallback(() => {
     if (rive) {
+      rive.startRendering();
       rive.resizeToCanvas();
     }
-  }
+  }, [rive]);
 
-  /**
-   * Listen to changes on the windowSize and the rive file being loaded
-   * and update the canvas bounds as needed.
-   */
-  useEffect(() => {
-    if (rive) {
-      updateBounds();
-    }
-  }, [rive, windowSize]);
+  // Watch the canvas parent container resize and size the canvas to match
+  useResizeCanvas({
+    riveLoaded: !!rive,
+    canvasElem,
+    containerRef,
+    options,
+    onCanvasHasResized,
+    artboardBounds: rive?.bounds,
+  });
 
   /**
    * Ref callback called when the canvas element mounts and unmounts.
    */
   const setCanvasRef: RefCallback<HTMLCanvasElement> = useCallback(
     (canvas: HTMLCanvasElement | null) => {
-      if (canvas && riveParams) {
-        const { useOffscreenRenderer } = options;
-        const r = new Rive({
-          useOffscreenRenderer,
-          ...riveParams,
-          canvas,
-        });
-        r.on(EventType.Load, () => setRive(r));
-      } else if (canvas === null && canvasRef.current) {
-        canvasRef.current.height = 0;
-        canvasRef.current.width = 0;
+      if (canvas === null && canvasElem) {
+        canvasElem.height = 0;
+        canvasElem.width = 0;
       }
 
-      canvasRef.current = canvas;
+      setCanvasElem(canvas);
     },
-    [isParamsLoaded]
+    []
   );
 
+  useEffect(() => {
+    if (!canvasElem || !riveParams) {
+      return;
+    }
+    if (rive == null) {
+      const { useOffscreenRenderer } = options;
+      const r = new Rive({
+        useOffscreenRenderer,
+        ...riveParams,
+        canvas: canvasElem,
+      });
+      r.on(EventType.Load, () => {
+        // Check if the component/canvas is mounted before setting state to avoid setState
+        // on an unmounted component in some rare cases
+        if (canvasElem) {
+          setRive(r);
+        } else {
+          // If unmounted, cleanup the rive object immediately
+          r.cleanup();
+        }
+      });
+    }
+  }, [canvasElem, isParamsLoaded, rive]);
   /**
    * Ref callback called when the container element mounts
    */
@@ -199,33 +147,75 @@ export default function useRive(
    * Set up IntersectionObserver to stop rendering if the animation is not in
    * view.
    */
+  const { observe, unobserve } = useIntersectionObserver();
+
   useEffect(() => {
-    const observer = new IntersectionObserver(([entry]) => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    let isPaused = false;
+    // This is a workaround to retest whether an element is offscreen or not.
+    // There seems to be a bug in Chrome that triggers an intersection change when an element
+    // is moved within the DOM using insertBefore.
+    // For some reason, when this is called whithin the context of a React application, the
+    // intersection callback is called only once reporting isIntersecting as false but never
+    // triggered back with isIntersecting as true.
+    // For this reason we retest after 10 millisecond whether the element is actually off the
+    // viewport or not.
+    const retestIntersection = () => {
+      if (canvasElem && isPaused) {
+        const size = canvasElem.getBoundingClientRect();
+        const isIntersecting =
+          size.width > 0 &&
+          size.height > 0 &&
+          size.top <
+            (window.innerHeight || document.documentElement.clientHeight) &&
+          size.bottom > 0 &&
+          size.left <
+            (window.innerWidth || document.documentElement.clientWidth) &&
+          size.right > 0;
+        if (isIntersecting) {
+          rive?.startRendering();
+          isPaused = false;
+        }
+      }
+    };
+    const onChange = (entry: IntersectionObserverEntry) => {
       entry.isIntersecting
         ? rive && rive.startRendering()
         : rive && rive.stopRendering();
-    });
-
-    if (canvasRef.current) {
-      observer.observe(canvasRef.current);
-    }
-
-    return () => {
-      observer.disconnect();
+      isPaused = !entry.isIntersecting;
+      clearTimeout(timeoutId);
+      if (!entry.isIntersecting && entry.boundingClientRect.width === 0) {
+        timeoutId = setTimeout(retestIntersection, 10);
+      }
     };
-  }, [rive]);
+    if (canvasElem && options.shouldUseIntersectionObserver !== false) {
+      observe(canvasElem, onChange);
+    }
+    return () => {
+      if (canvasElem) {
+        unobserve(canvasElem);
+      }
+    };
+  }, [
+    observe,
+    unobserve,
+    rive,
+    canvasElem,
+    options.shouldUseIntersectionObserver,
+  ]);
 
   /**
-   * On unmount, stop rive from rendering.
+   * On unmount, call cleanup to cleanup any WASM generated objects that need
+   * to be manually destroyed.
    */
   useEffect(() => {
     return () => {
       if (rive) {
-        rive.stop();
+        rive.cleanup();
         setRive(null);
       }
     };
-  }, [rive]);
+  }, [rive, canvasElem]);
 
   /**
    * Listen for changes in the animations params
@@ -253,11 +243,12 @@ export default function useRive(
         />
       );
     },
-    []
+    [setCanvasRef, setContainerRef]
   );
 
   return {
-    canvas: canvasRef.current,
+    canvas: canvasElem,
+    container: containerRef.current,
     setCanvasRef,
     setContainerRef,
     rive,

src/hooks/useRiveFile.ts

@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+import type {
+  UseRiveFileParameters,
+  RiveFileState,
+  FileStatus,
+} from '../types';
+import { EventType, RiveFile } from '@rive-app/canvas';
+
+/**
+ * Custom hook for initializing and managing a RiveFile instance within a component.
+ * It sets up a RiveFile based on provided source parameters (URL or ArrayBuffer) and ensures
+ * proper cleanup to avoid memory leaks when the component unmounts or inputs change.
+ *
+ * @param params - Object containing parameters accepted by the Rive file in the @rive-app/canvas runtime,
+ *
+ * @returns {RiveFileState} Contains the active RiveFile instance (`riveFile`) and the loading status.
+ */
+function useRiveFile(params: UseRiveFileParameters): RiveFileState {
+  const [riveFile, setRiveFile] = useState<RiveFile | null>(null);
+  const [status, setStatus] = useState<FileStatus>('idle');
+
+  useEffect(() => {
+    let file: RiveFile | null = null;
+
+    const loadRiveFile = async () => {
+      try {
+        setStatus('loading');
+        file = new RiveFile(params);
+        file.init();
+        file.on(EventType.Load, () => {
+          // We request an instance to add +1 to the referencesCount so it doesn't get destroyed
+          // while this hook is active
+          file?.getInstance();
+          setRiveFile(file);
+          setStatus('success');
+        });
+        file.on(EventType.LoadError, () => {
+          setStatus('failed');
+        });
+        setRiveFile(file);
+      } catch (error) {
+        console.error(error);
+        setStatus('failed');
+      }
+    };
+
+    loadRiveFile();
+
+    return () => {
+      file?.cleanup();
+    };
+  }, [params.src, params.buffer]);
+
+  return { riveFile, status };
+}
+
+export default useRiveFile;

src/hooks/useStateMachineInput.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from '@rive-app/canvas';
+import { EventType, Rive, StateMachineInput } from '@rive-app/canvas';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.
@@ -18,21 +18,33 @@ export default function useStateMachineInput(
   const [input, setInput] = useState<StateMachineInput | null>(null);
 
   useEffect(() => {
-    if (!rive || !stateMachineName || !inputName) {
-      setInput(null);
-    }
-
-    if (rive && stateMachineName && inputName) {
-      const inputs = rive.stateMachineInputs(stateMachineName);
-      if (inputs) {
-        const selectedInput = inputs.find((input) => input.name === inputName);
-        if (initialValue !== undefined && selectedInput) {
-          selectedInput.value = initialValue;
-        }
-        setInput(selectedInput || null);
+    function setStateMachineInput() {
+      if (!rive || !stateMachineName || !inputName) {
+        setInput(null);
       }
-    } else {
-      setInput(null);
+
+      if (rive && stateMachineName && inputName) {
+        const inputs = rive.stateMachineInputs(stateMachineName);
+        if (inputs) {
+          const selectedInput = inputs.find(
+            (input) => input.name === inputName
+          );
+          if (initialValue !== undefined && selectedInput) {
+            selectedInput.value = initialValue;
+          }
+          setInput(selectedInput || null);
+        }
+      } else {
+        setInput(null);
+      }
+    }
+    setStateMachineInput();
+    if (rive) {
+      rive.on(EventType.Load, () => {
+        // Check if the component/canvas is mounted before setting state to avoid setState
+        // on an unmounted component in some rare cases
+        setStateMachineInput();
+      });
     }
   }, [rive]);
 

src/index.ts

@@ -1,8 +1,10 @@
-import Rive from './components/Rive';
+import Rive, { RiveProps } from './components/Rive';
 import useRive from './hooks/useRive';
 import useStateMachineInput from './hooks/useStateMachineInput';
+import useResizeCanvas from './hooks/useResizeCanvas';
+import useRiveFile from './hooks/useRiveFile';
 
 export default Rive;
-export { useRive, useStateMachineInput };
-export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
+export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile , RiveProps };
+export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions } from './types';
 export * from '@rive-app/canvas';

src/types.ts

@@ -1,12 +1,20 @@
-import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from '@rive-app/canvas';
+import {
+  Rive,
+  RiveFile,
+  RiveFileParameters,
+  RiveParameters,
+} from '@rive-app/canvas';
+import { ComponentProps, RefCallback } from 'react';
 
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 
 export type UseRiveOptions = {
   useDevicePixelRatio: boolean;
+  customDevicePixelRatio: number;
   fitCanvasToArtboardHeight: boolean;
   useOffscreenRenderer: boolean;
+  shouldResizeCanvasToContainer: boolean;
+  shouldUseIntersectionObserver?: boolean;
 };
 
 export type Dimensions = {
@@ -17,17 +25,35 @@ export type Dimensions = {
 /**
  * @typedef RiveState
  * @property canvas - Canvas element the Rive Animation is attached to.
+ * @property container - Container element of the canvas.
  * @property setCanvasRef - Ref callback to be passed to the canvas element.
- * @property setContainerRef - Ref callback to be passed to the container element
- *   of the canvas. This is optional, however if not used then the hook will
- *   not take care of automatically resizing the canvas to it's outer
+ * @property setContainerRef - Ref callback to be passed to the container
+ * element of the canvas. This is optional, however if not used then the hook
+ * will not take care of automatically resizing the canvas to it's outer
  *   container if the window resizes.
  * @property rive - The loaded Rive Animation
  */
 export type RiveState = {
   canvas: HTMLCanvasElement | null;
+  container: HTMLElement | null;
   setCanvasRef: RefCallback<HTMLCanvasElement>;
   setContainerRef: RefCallback<HTMLElement>;
   rive: Rive | null;
   RiveComponent: (props: ComponentProps<'canvas'>) => JSX.Element;
 };
+
+export type UseRiveFileParameters = Partial<
+  Omit<RiveFileParameters, 'onLoad' | 'onLoadError'>
+>;
+
+export type FileStatus = 'idle' | 'loading' | 'failed' | 'success';
+
+/**
+ * @typedef RiveFileState
+ * @property data - The RiveFile instance
+ * @property status - The status of the file
+ */
+export type RiveFileState = {
+  riveFile: RiveFile | null;
+  status: FileStatus;
+};

src/utils.ts

@@ -1,24 +1,12 @@
-import { useState, useEffect } from 'react';
-import { Dimensions } from './types';
+import { UseRiveOptions } from './types';
 
-export function useWindowSize() {
-  const [windowSize, setWindowSize] = useState<Dimensions>({
-    width: 0,
-    height: 0,
-  });
+const defaultOptions = {
+  useDevicePixelRatio: true,
+  fitCanvasToArtboardHeight: false,
+  useOffscreenRenderer: true,
+  shouldResizeCanvasToContainer: true,
+};
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleResize = () => {
-        setWindowSize({
-          width: window.innerWidth,
-          height: window.innerHeight,
-        });
-      };
-      window.addEventListener('resize', handleResize);
-      handleResize();
-      return () => window.removeEventListener('resize', handleResize);
-    }
-  }, []);
-  return windowSize;
+export function getOptions(opts: Partial<UseRiveOptions>) {
+  return Object.assign({}, defaultOptions, opts);
 }

test/Rive.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import RiveComponent from '../src/components/Rive';
-import {render} from '@testing-library/react'
+import { render } from '@testing-library/react';
 
 jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
@@ -26,8 +26,29 @@ jest.mock('@rive-app/canvas', () => ({
 
 describe('Rive Component', () => {
   it('renders the component as a canvas and a div wrapper', () => {
-    const {container, getByLabelText} = render(<RiveComponent src="foo.riv" className="container-styles" aria-label="Foo label" />);
+    const { container, getByLabelText } = render(
+      <RiveComponent
+        src="foo.riv"
+        className="container-styles"
+        aria-label="Foo label"
+      />
+    );
     expect(container.firstChild).toHaveClass('container-styles');
     expect(getByLabelText('Foo label').tagName).toEqual('CANVAS');
   });
+
+  it('allows children to render in the canvas body', () => {
+    const accessibleFallbackText = 'An animated test';
+    const { getByText } = render(
+      <RiveComponent
+        src="foo.riv"
+        className="container-styles"
+        aria-label="Foo label"
+      >
+        <p>{accessibleFallbackText}</p>
+      </RiveComponent>
+    );
+
+    expect(getByText(accessibleFallbackText)).not.toBeNull();
+  });
 });

test/elementObserver.test.tsx

@@ -0,0 +1,39 @@
+// TODO move this
+const observe = jest.fn();
+const unobserve = jest.fn();
+const disconnect = jest.fn();
+
+jest.spyOn(globalThis, 'IntersectionObserver').mockImplementation(() => {
+  return {
+    observe,
+    unobserve,
+    disconnect,
+    root: null,
+    thresholds: [],
+    rootMargin: '',
+    takeRecords: () => [],
+  };
+});
+
+import ElementObserver from '../src/hooks/elementObserver';
+
+describe('elementObserver', () => {
+  it('registers a callback and observes the element', () => {
+    const observer = new ElementObserver();
+    const element = document.createElement('li');
+    observer.registerCallback(element, ()=>{});
+    expect(observe).toHaveBeenCalled();
+    expect(observe).toHaveBeenCalledWith(element);
+  });
+  
+  it('unregisters a callback and unobserves the element', () => {
+    const observer = new ElementObserver();
+    const element = document.createElement('li');
+    observer.removeCallback(element);
+    expect(unobserve).toHaveBeenCalled();
+    expect(unobserve).toHaveBeenCalledWith(element);
+  });
+
+});
+
+jest.clearAllMocks();

test/useIntersectionObserver.test.tsx

@@ -0,0 +1,42 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import ElementObserver from '../src/hooks/elementObserver';
+jest.mock('../src/hooks/elementObserver');
+
+import useIntersectionObserver from '../src/hooks/useIntersectionObserver';
+
+describe('useIntersectionObserver', () => {
+  it('returns an object on initialization', () => {
+    const { result } = renderHook(() => useIntersectionObserver());
+    expect(result.current).toBeDefined();
+  });
+
+  it('registers a callback', () => {
+    const { result } = renderHook(() => useIntersectionObserver());
+    const element = document.createElement('li');
+    const callback = () => {};
+    act(() => {
+      result.current.observe(element, callback);
+    });
+    const mockElementObserver = (ElementObserver as jest.Mock).mock
+      .instances[0];
+    const registerCallback = mockElementObserver.registerCallback;
+    expect(registerCallback.mock.calls.length).toBe(1);
+    expect(registerCallback.mock.calls[0].length).toBe(2);
+    expect(registerCallback.mock.calls[0][0]).toBe(element);
+    expect(registerCallback.mock.calls[0][1]).toBe(callback);
+  });
+
+  it('unregisters a callback', () => {
+    const { result } = renderHook(() => useIntersectionObserver());
+    const element = document.createElement('li');
+    act(() => {
+      result.current.unobserve(element);
+    });
+    const mockElementObserver = (ElementObserver as jest.Mock).mock
+      .instances[0];
+    const removeCallback = mockElementObserver.removeCallback;
+    expect(removeCallback.mock.calls.length).toBe(1);
+    expect(removeCallback.mock.calls[0].length).toBe(1);
+    expect(removeCallback.mock.calls[0][0]).toBe(element);
+  });
+});

test/useRive.test.tsx

@@ -4,7 +4,7 @@ import { renderHook, act } from '@testing-library/react-hooks';
 
 import useRive from '../src/hooks/useRive';
 import * as rive from '@rive-app/canvas';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 
 jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
@@ -29,6 +29,23 @@ jest.mock('@rive-app/canvas', () => ({
 }));
 
 describe('useRive', () => {
+  let controlledRiveloadCb: () => void;
+  let baseRiveMock: Partial<rive.Rive>;
+
+  beforeEach(() => {
+    baseRiveMock = {
+      on: (_: rive.EventType, cb: rive.EventCallback) =>
+        ((controlledRiveloadCb as rive.EventCallback) = cb),
+      stop: jest.fn(),
+      stopRendering: jest.fn(),
+      startRendering: jest.fn(),
+    };
+  });
+
+  afterEach(() => {
+    controlledRiveloadCb = () => {};
+  });
+
   it('returns rive as null if no params are passed', () => {
     const { result } = renderHook(() => useRive());
     expect(result.current.rive).toBe(null);
@@ -40,14 +57,8 @@ describe('useRive', () => {
       src: 'file-src',
     };
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-      stopRendering: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
 
     const canvasSpy = document.createElement('canvas');
     const { result } = renderHook(() => useRive(params));
@@ -55,8 +66,13 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
     });
-
-    expect(result.current.rive).toBe(riveMock);
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
+    expect(result.current.rive).toBe(baseRiveMock);
     expect(result.current.canvas).toBe(canvasSpy);
   });
 
@@ -68,9 +84,7 @@ describe('useRive', () => {
     const resizeToCanvasMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-      stopRendering: jest.fn(),
+      ...baseRiveMock,
       resizeToCanvas: resizeToCanvasMock,
     };
 
@@ -85,6 +99,17 @@ describe('useRive', () => {
       result.current.setCanvasRef(canvasSpy);
       result.current.setContainerRef(containerSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
+    await act(async () => {
+      jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(500);
+      jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(500);
+      containerSpy.dispatchEvent(new Event('resize'));
+    });
 
     expect(result.current.rive).toBe(riveMock);
     expect(result.current.canvas).toBe(canvasSpy);
@@ -92,16 +117,16 @@ describe('useRive', () => {
     expect(resizeToCanvasMock).toBeCalled();
   });
 
-  it('stops the rive object on unmount', async () => {
+  it('calls cleanup on the rive object on unmount', async () => {
     const params = {
       src: 'file-src',
     };
 
-    const stopMock = jest.fn();
+    const cleanupMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: stopMock,
+      ...baseRiveMock,
+      cleanup: cleanupMock,
     };
 
     // @ts-ignore
@@ -113,33 +138,32 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
 
     unmount();
 
-    expect(stopMock).toBeCalled();
+    expect(cleanupMock).toBeCalled();
   });
 
-  it('sets the a bounds with the devicePixelRatio by default', async () => {
+  it('sets the bounds with the devicePixelRatio by default', async () => {
     const params = {
       src: 'file-src',
     };
 
     global.devicePixelRatio = 2;
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
 
     const canvasSpy = document.createElement('canvas');
     const containerSpy = document.createElement('div');
-    containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
-      width: 100,
-      height: 100,
-    }));
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
 
     const { result } = renderHook(() => useRive(params));
 
@@ -147,6 +171,12 @@ describe('useRive', () => {
       result.current.setCanvasRef(canvasSpy);
       result.current.setContainerRef(containerSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
 
     // Height and width should be 2* the width and height returned from containers
     // bounding rect
@@ -158,6 +188,46 @@ describe('useRive', () => {
     expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
   });
 
+  it('sets the bounds with a specified customDevicePixelRatio if one is set', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    global.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+
+    const { result } = renderHook(() =>
+      useRive(params, { customDevicePixelRatio: 1 })
+    );
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+    });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
+
+    // Height and width should be 2* the width and height returned from containers
+    // bounding rect
+    expect(canvasSpy).toHaveAttribute('height', '100');
+    expect(canvasSpy).toHaveAttribute('width', '100');
+
+    // Style height and width should be the same as returned from containers
+    // bounding rect
+    expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
+  });
+
   it('sets the a bounds without the devicePixelRatio if useDevicePixelRatio is false', async () => {
     const params = {
       src: 'file-src',
@@ -166,20 +236,13 @@ describe('useRive', () => {
       useDevicePixelRatio: false,
     };
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
 
     const canvasSpy = document.createElement('canvas');
     const containerSpy = document.createElement('div');
-    containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
-      width: 100,
-      height: 100,
-    }));
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
 
     const { result } = renderHook(() => useRive(params, opts));
 
@@ -187,13 +250,19 @@ describe('useRive', () => {
       result.current.setCanvasRef(canvasSpy);
       result.current.setContainerRef(containerSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
 
     // Height and width should be same as containers bounding rect
     expect(canvasSpy).toHaveAttribute('height', '100');
     expect(canvasSpy).toHaveAttribute('width', '100');
   });
 
-  it('uses artbound height to set bounds if fitCanvasToArtboardHeight is true', async () => {
+  it('uses artboard height to set bounds if fitCanvasToArtboardHeight is true', async () => {
     const params = {
       src: 'file-src',
     };
@@ -203,8 +272,7 @@ describe('useRive', () => {
     };
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
+      ...baseRiveMock,
       bounds: {
         maxX: 100,
         maxY: 50,
@@ -216,10 +284,8 @@ describe('useRive', () => {
 
     const canvasSpy = document.createElement('canvas');
     const containerSpy = document.createElement('div');
-    containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
-      width: 100,
-      height: 100,
-    }));
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
 
     const { result } = renderHook(() => useRive(params, opts));
 
@@ -227,6 +293,12 @@ describe('useRive', () => {
       result.current.setContainerRef(containerSpy);
       result.current.setCanvasRef(canvasSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
 
     // Height and width should be same as containers bounding rect
     expect(canvasSpy).toHaveAttribute('height', '50');
@@ -236,43 +308,6 @@ describe('useRive', () => {
     expect(containerSpy).toHaveAttribute('style', 'height: 50px;');
   });
 
-  it('configures a IntersectionObserver on mounting', async () => {
-    const params = {
-      src: 'file-src',
-    };
-
-    const observeMock = jest.fn();
-
-    const restore = global.IntersectionObserver;
-    global.IntersectionObserver = jest.fn().mockImplementation(() => ({
-      observe: observeMock,
-    }));
-
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-      bounds: {
-        maxX: 100,
-        maxY: 50,
-      },
-    };
-
-    // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
-
-    const canvasSpy = document.createElement('canvas');
-
-    const { result } = renderHook(() => useRive(params));
-
-    await act(async () => {
-      result.current.setCanvasRef(canvasSpy);
-    });
-
-    expect(observeMock).toBeCalledWith(canvasSpy);
-
-    global.IntersectionObserver = restore;
-  });
-
   it('updates the playing animations when the animations param changes', async () => {
     const params = {
       src: 'file-src',
@@ -283,7 +318,7 @@ describe('useRive', () => {
     const stopMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
+      ...baseRiveMock,
       stop: stopMock,
       play: playMock,
       animationNames: ['light'],
@@ -302,6 +337,12 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
 
     rerender({
       src: 'file-src',
@@ -323,7 +364,7 @@ describe('useRive', () => {
     const stopMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
+      ...baseRiveMock,
       stop: stopMock,
       play: playMock,
       pause: pauseMock,
@@ -344,6 +385,12 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
 
     rerender({
       src: 'file-src',
@@ -360,14 +407,8 @@ describe('useRive', () => {
       src: 'file-src',
     };
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-      stopRendering: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
 
     const canvasSpy = document.createElement('canvas');
     const { result } = renderHook(() => useRive(params));
@@ -375,6 +416,12 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
     });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
 
     const { RiveComponent: RiveTestComponent } = result.current;
     const { container } = render(
@@ -382,4 +429,142 @@ describe('useRive', () => {
     );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
+
+  it('has a canvas size of 0 by default', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+    });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
+
+    const { RiveComponent: RiveTestComponent } = result.current;
+    const { container } = render(<RiveTestComponent />);
+    expect(container.querySelector('canvas')).toHaveStyle('width: 0');
+  });
+
+  it('sets the canvas width and height after calculating the container size', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    global.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+    });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
+
+    expect(canvasSpy).toHaveStyle('height: 100px');
+    expect(canvasSpy).toHaveStyle('width: 100px');
+  });
+
+  it('updates the canvas dimensions and size if there is a new canvas size calculation', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    window.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+      jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(200);
+      jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(200);
+    });
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
+
+    await act(async () => {
+      containerSpy.dispatchEvent(new Event('resize'));
+    });
+
+    expect(canvasSpy).toHaveAttribute('width', '400');
+    expect(canvasSpy).toHaveAttribute('height', '400');
+  });
+
+  it('prevents resizing if shouldResizeCanvasToContainer option is false', async () => {
+    const params = {
+      src: 'file-src',
+    };
+    const options = {
+      shouldResizeCanvasToContainer: false,
+    };
+
+    window.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    canvasSpy.width = 200;
+    canvasSpy.height = 200;
+    const containerSpy = document.createElement('div');
+
+    const { result } = renderHook(() => useRive(params, options));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+    });
+
+    await waitFor(() => {
+      expect(result.current.canvas).toBe(canvasSpy);
+    });
+    await act(async () => {
+      controlledRiveloadCb();
+    });
+
+    await act(async () => {
+      jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(500);
+      jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(500);
+      containerSpy.dispatchEvent(new Event('resize'));
+    });
+
+    expect(canvasSpy.width).toBe(200);
+    expect(canvasSpy.height).toBe(200);
+  });
 });

test/useRiveFile.test.tsx

@@ -0,0 +1,142 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { mocked } from 'jest-mock';
+
+import useRiveFile from '../src/hooks/useRiveFile';
+import { RiveFile } from '@rive-app/canvas';
+
+jest.mock('@rive-app/canvas', () => ({
+  RiveFile: jest.fn().mockImplementation(() => ({
+    cleanup: jest.fn(),
+    on: jest.fn(),
+    init: jest.fn(),
+    getInstance: jest.fn(),
+  })),
+  EventType: {
+    Load: 'load',
+    loadError: 'loadError',
+  },
+}));
+
+
+describe('useRiveFile', () => {
+  beforeEach(() => {
+    mocked(RiveFile).mockClear();
+  });
+
+
+
+  it('initializes RiveFile with provided parameters', async () => {
+    const params = {
+      src: 'file-src',
+      enableRiveAssetCDN: false
+    };
+
+    const { result } = renderHook(() => useRiveFile(params));
+
+    expect(RiveFile).toHaveBeenCalledWith(params);
+    expect(result.current.riveFile).toBeDefined();
+  });
+
+  it('cleans up RiveFile on unmount', async () => {
+    const params = {
+      src: 'file-src',
+      enableRiveAssetCDN: false
+    };
+
+    const { result, unmount } = renderHook(() => useRiveFile(params));
+
+    const riveInstance = result.current.riveFile;
+    expect(riveInstance).toBeDefined();
+
+    unmount();
+
+    expect(riveInstance?.cleanup).toHaveBeenCalled();
+  });
+
+  it('does not reinitialize RiveFile if src has not changed', async () => {
+    const params = {
+      src: 'file-src',
+      enableRiveAssetCDN: false
+    };
+
+    const { rerender } = renderHook(() => useRiveFile(params));
+
+    rerender();
+
+    expect(RiveFile).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not reinitialize RiveFile if buffer has not changed', async () => {
+    const params = {
+      buffer: new ArrayBuffer(10),
+      enableRiveAssetCDN: false
+    };
+
+    const { rerender } = renderHook(() => useRiveFile(params));
+
+    rerender();
+
+    expect(RiveFile).toHaveBeenCalledTimes(1);
+  });
+
+  it('reinitializes RiveFile if src changes', async () => {
+    let params = {
+      src: 'file-src',
+      enableRiveAssetCDN: false
+    };
+
+    const { rerender } = renderHook(() => useRiveFile(params));
+
+    params = {
+      src: 'new-file-src',
+      enableRiveAssetCDN: false
+    };
+
+    rerender();
+
+    expect(RiveFile).toHaveBeenCalledTimes(2);
+  });
+
+  it('reinitializes RiveFile if buffer changes', async () => {
+    let params = {
+      buffer: new ArrayBuffer(10),
+      enableRiveAssetCDN: false
+    };
+
+    const { rerender } = renderHook(() => useRiveFile(params));
+
+    params = {
+      buffer: new ArrayBuffer(20),
+      enableRiveAssetCDN: false
+    };
+
+    rerender();
+
+    expect(RiveFile).toHaveBeenCalledTimes(2);
+  });
+
+  it('handles RiveFile initialization failure gracefully', async () => {
+
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
+    const error = new Error("Initialization failed");
+
+    mocked(RiveFile).mockImplementation(() => {
+      throw error;
+    });
+
+    const params = {
+      src: 'file-src',
+      enableRiveAssetCDN: false,
+    };
+
+    const { result, rerender } = renderHook(() => useRiveFile(params));
+
+    rerender();
+
+    expect(result.current.status).toBe('failed');
+    expect(result.current.riveFile).toBeNull();
+    expect(consoleSpy).toHaveBeenCalledWith(error);
+
+    consoleSpy.mockRestore();
+  });
+});

test/useStateMachine.test.tsx

@@ -2,12 +2,13 @@ import { mocked } from 'jest-mock';
 import { renderHook } from '@testing-library/react-hooks';
 
 import useStateMachineInput from '../src/hooks/useStateMachineInput';
-import {Rive, StateMachineInput} from '@rive-app/canvas';
+import { Rive, StateMachineInput } from '@rive-app/canvas';
 
 jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),
+    stateMachineInputs: jest.fn(),
   })),
   Layout: jest.fn(),
   Fit: {
@@ -26,6 +27,21 @@ jest.mock('@rive-app/canvas', () => ({
   },
 }));
 
+function getRiveMock({
+  smiInputs,
+}: {
+  smiInputs?: null | StateMachineInput[];
+} = {}) {
+  const riveMock = new Rive({
+    canvas: undefined as unknown as HTMLCanvasElement,
+  });
+  if (smiInputs) {
+    riveMock.stateMachineInputs = jest.fn().mockReturnValue(smiInputs);
+  }
+
+  return riveMock;
+}
+
 describe('useStateMachineInput', () => {
   it('returns null if there is null rive object passed', () => {
     const { result } = renderHook(() => useStateMachineInput(null));
@@ -33,29 +49,33 @@ describe('useStateMachineInput', () => {
   });
 
   it('returns null if there is no state machine name', () => {
-    const riveMock = {};
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock();
 
-    const { result } = renderHook(() => useStateMachineInput(riveMock as Rive, '', 'testInput'));
+    mocked(Rive).mockImplementation(() => riveMock);
+
+    const { result } = renderHook(() =>
+      useStateMachineInput(riveMock, '', 'testInput')
+    );
     expect(result.current).toBeNull();
   });
 
   it('returns null if there is no state machine input name', () => {
-    const riveMock = {};
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock();
 
-    const { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', ''));
+    const { result } = renderHook(() =>
+      useStateMachineInput(riveMock, 'smName', '')
+    );
     expect(result.current).toBeNull();
   });
 
   it('returns null if there are no inputs for the state machine', () => {
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [] });
 
-    const { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', ''));
+    mocked(Rive).mockImplementation(() => riveMock);
+
+    const { result } = renderHook(() =>
+      useStateMachineInput(riveMock as Rive, 'smName', '')
+    );
     expect(result.current).toBeNull();
   });
 
@@ -63,13 +83,13 @@ describe('useStateMachineInput', () => {
     const smInput = {
       name: 'boolInput',
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
 
-    const { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', 'numInput'));
+    mocked(Rive).mockImplementation(() => riveMock);
+
+    const { result } = renderHook(() =>
+      useStateMachineInput(riveMock, 'smName', 'numInput')
+    );
     expect(result.current).toBeNull();
   });
 
@@ -77,13 +97,13 @@ describe('useStateMachineInput', () => {
     const smInput = {
       name: 'boolInput',
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
 
-    const { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', 'boolInput'));
+    mocked(Rive).mockImplementation(() => riveMock);
+
+    const { result } = renderHook(() =>
+      useStateMachineInput(riveMock, 'smName', 'boolInput')
+    );
     expect(result.current).toBe(smInput);
   });
 
@@ -92,13 +112,12 @@ describe('useStateMachineInput', () => {
       name: 'boolInput',
       value: false,
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
+    mocked(Rive).mockImplementation(() => riveMock);
 
-    const { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', 'boolInput', true));
+    const { result } = renderHook(() =>
+      useStateMachineInput(riveMock, 'smName', 'boolInput', true)
+    );
     expect(result.current).toStrictEqual({
       ...smInput,
       value: true,