adding resize example

update name
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.
2026-03-13 08:22:30 +08:00 · 2022-07-21 17:00:42 +02:00 · 2022-07-21 17:00:21 +02:00 · 2022-07-21 10:17:27 +01:00 · 2022-07-21 10:08:52 +01:00
35 changed files with 493 additions and 1164 deletions
--- a/.github/workflows/add_to_project.yml
+++ b/.github/workflows/add_to_project.yml
@@ -1,26 +0,0 @@
-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"]
-            })
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -1,28 +1,43 @@
 name: Publish to NPM
 on:
-  workflow_dispatch:
-    inputs:
-      major:
-        description: 'Major'
-        type: boolean
-        default: false
-      minor:
-        description: 'Minor'
-        type: boolean
-        default: false
+  pull_request:
+    types: [closed]
+    branches:
+      - main
 jobs:
-  publish_job:
+  determine_version:
+    name: Determine the next build version
+    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.echo_version.outputs.version }}
    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - name: Setup Git config
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./
+      - 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 }}
+      - 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'
@@ -35,24 +50,30 @@ jobs:
        run: npm run lint
      - name: Run Tests
        run: npm test
-      - if: ${{ inputs.major == true }}
-        name: Major Release - Bump version number, update changelog, push and tag
-        run: npm run release:major
+      - 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
        env:
          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-          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
+        run: npm run release -- --ci
+      - name: Release @rive-app/react-* variants
        env:
          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-          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 }}
+        run: ./scripts/publish_all.sh
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,7 +1,5 @@
 {
  "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"
@@ -14,12 +12,6 @@
    "releaseName": "${version}"
  },
  "hooks": {
-    "after:version:bump": [
-      "npm run build",
-      "npm run setup-builds",
-      "npm run setup-packages",
-      "npx auto-changelog -p",
-      "npm run publish:all"
-    ]
+    "after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"]
  }
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,360 +4,9 @@ All notable changes to this project will be documented in this file. Dates are d

 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

-#### [v4.3.0](https://github.com/rive-app/rive-react/compare/v4.2.1...v4.3.0)
-
- feature: Bump WASM dependency to support Rive Events [`6ba68fa`](https://github.com/rive-app/rive-react/commit/6ba68fab9e5482a3ab2a92410ebb1b422db9ff9e)
-
-#### [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)

@@ -389,20 +38,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - 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)
+#### [v3.0.14](https://github.com/rive-app/rive-react/compare/v3.0.12...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)
+- chore: release 3.0.14 [`04353db`](https://github.com/rive-app/rive-react/commit/04353db43266f6dcf40f4ef7f3be23afa13c2e0d)

 #### [v3.0.12](https://github.com/rive-app/rive-react/compare/v3.0.11...v3.0.12)

@@ -419,19 +61,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - 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)
+#### [v3.0.10](https://github.com/rive-app/rive-react/compare/v3.0.8...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)
@@ -686,26 +321,13 @@ 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.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)
+#### [v0.0.14](https://github.com/rive-app/rive-react/compare/v0.0.11...v0.0.14)

 > 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.12 [`6212844`](https://github.com/rive-app/rive-react/commit/621284482538d6b5a4cb16cf845c53528208b0bb)
+- 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.11](https://github.com/rive-app/rive-react/compare/v0.0.10...v0.0.11)

--- a/README.md
+++ b/README.md
@@ -50,11 +50,7 @@ Check out our Storybook instance that shows how to use the library in small exam
 - [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)
-
-### Awesome Rive
-
-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.
+- [Accessibility concerns](https://blog.rive.app/accessible-web-animations-aria-live-regions/)

 ## Migration Guides

--- a/examples/resize-test/README.md
+++ b/examples/resize-test/README.md
@@ -0,0 +1,32 @@
+# To run
+
+This is a basic showcase of a resize issue we have, to test this locally with rive-react changes
+
+1. run `npm start`
+2. run `npm run build` for the rive-react project
+
+If you want to also test local wasm changes: 
+
+1. update `rive-react`/package.json to a locally checked out version of rive-wasm's canvas_single
+`"@rive-app/canvas": "../rive-wasm/js/npm/canvas_single",`
+2. cd to `rive-wasm/js` & run `npm run dev` (keep this going as it will watch for changes)
+3. run `npm start`
+4. run `npm run build` for the rive-react project
+
+
+# Resize issue: 
+
+update parameters in `utils.ts` to see this for yourself.
+
+Resizing from window.resize
+    - bottom animation moves slower than rest
+    - cannot deal with the animations container resizing, unless its linked to the window resizing
+Resizing from ResizeObserver
+    - all animations move together super smooth when resizing
+    - top two animations flicker to white (blank canvas) when resizing
+Resizing form ResizeObserver - throttled (current default)
+    - all animations move "together"
+    - resizing looks pretty smooth, but everything lags behind a bit.
+
+# Other issues
+its also very slow resizing when dev tools is open, its fine when closed though.
--- a/examples/resize-test/package.json
+++ b/examples/resize-test/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "basic-with-hook",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "file:../../node_modules/react",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "rive-react": "file:../..",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/examples/resize-test/public/index.html
+++ b/examples/resize-test/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>Rive React - Basic with Hook</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/examples/resize-test/public/magic-ball.riv
+++ b/examples/resize-test/public/magic-ball.riv
--- a/examples/resize-test/public/poison-loader.riv
+++ b/examples/resize-test/public/poison-loader.riv
--- a/examples/resize-test/src/App.js
+++ b/examples/resize-test/src/App.js
@@ -0,0 +1,30 @@
+import { useRive } from 'rive-react';
+
+function App() {
+  const params = {
+    src: 'poison-loader.riv',
+    autoplay: true,
+  };
+
+  const { RiveComponent: RiveComponentBasic } = useRive(params);
+  const { RiveComponent: RiveComponentBasic2 } = useRive(params);
+  const { RiveComponent: RiveComponentBasic3 } = useRive(params);
+
+  return (
+    <>
+      <div style={{ width: '100%' }}>
+        <div style={{ height: '300px', width: '100%' }}>
+          <RiveComponentBasic />
+        </div>
+        <div style={{ height: '300px', width: '100%' }}>
+          <RiveComponentBasic2 />
+        </div>
+        <div style={{ height: '300px', width: '100%' }}>
+          <RiveComponentBasic3 />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default App;
--- a/examples/resize-test/src/index.js
+++ b/examples/resize-test/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
--- a/examples/stories/RiveOverview.stories.mdx
+++ b/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,7 +31,6 @@ 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.
@@ -57,13 +56,12 @@ 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">
    {() => {
@@ -71,7 +69,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: () => {
@@ -90,19 +88,15 @@ 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">
-              <p>Animation that can be paused and played by clicking on it</p>
-            </RiveComponentPlayback>
+            <RiveComponentPlayback className="base-canvas-size" />
            <p>{animationText}</p>
-            <Button onClick={togglePlaying}>
-              {isPlaying ? 'Pause' : 'Play'}
-            </Button>
+            <Button onClick={togglePlaying}>{isPlaying ? 'Pause' : 'Play'}</Button>
          </div>
        </>
-      );
+      ));
    }}
  </Story>
 </Canvas>
--- a/examples/stories/StateMachineDocs.stories.mdx
+++ b/examples/stories/StateMachineDocs.stories.mdx
@@ -1,15 +1,11 @@
 <!-- RiveTestHook.stories.mdx -->

-import { useState, useEffect } from 'react';
+import { useState } from 'react';

 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';

-import RiveComponent, {
-  EventType,
-  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/State Machines" />
@@ -19,7 +15,6 @@ import './rive-overview.css';
 Not familiar with Rive State Machines? Check out our [help docs](https://help.rive.app/editor/state-machine) 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
@@ -95,8 +90,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 = 'skill-controller';
-      const INPUT_NAME = 'level';
+      const STATE_MACHINE_NAME = 'State Machine ';
+      const INPUT_NAME = 'Level';
      const { rive, RiveComponent: RiveComponentTouch } = useRive({
        src: 'skills.riv',
        stateMachines: STATE_MACHINE_NAME,
@@ -106,11 +101,7 @@ 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.
@@ -164,35 +155,3 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg
    }}
  </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>
--- a/examples/stories/assets/rating_animation.riv
+++ b/examples/stories/assets/rating_animation.riv
--- a/examples/stories/assets/skills.riv
+++ b/examples/stories/assets/skills.riv
--- a/npm/react-canvas/package.json
+++ b/npm/react-canvas/package.json
@@ -1,26 +0,0 @@
-{
-  "name": "@rive-app/react-canvas",
-  "version": "4.3.0",
-  "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.4.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  }
-}
--- a/npm/react-webgl/package.json
+++ b/npm/react-webgl/package.json
@@ -1,26 +0,0 @@
-{
-  "name": "@rive-app/react-webgl",
-  "version": "4.3.0",
-  "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.4.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  }
-}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "rive-react",
-  "version": "4.3.0",
+  "version": "3.0.19",
  "description": "React wrapper around the rive-js library",
  "main": "dist/index.js",
  "typings": "dist/types/index.d.ts",
@@ -16,14 +16,7 @@
    "types:check": "tsc --noEmit",
    "release": "release-it",
    "storybook": "start-storybook -p 6006",
-    "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"
+    "build-storybook": "build-storybook -o docs-build"
  },
  "repository": {
    "type": "git",
@@ -36,8 +29,8 @@
  },
  "homepage": "https://github.com/rive-app/rive-react#readme",
  "dependencies": {
-    "@rive-app/canvas": "2.4.0",
-    "@rive-app/webgl": "2.4.0"
+    "@rive-app/canvas": "1.0.71",
+    "@rive-app/webgl": "1.0.68"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
--- a/scripts/bump_all_versions.sh
+++ b/scripts/bump_all_versions.sh
@@ -0,0 +1,11 @@
+#!/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
--- a/scripts/bump_version.sh
+++ b/scripts/bump_version.sh
@@ -0,0 +1,12 @@
+#!/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
--- a/scripts/nextVersion.js
+++ b/scripts/nextVersion.js
@@ -0,0 +1,33 @@
+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));
+}
--- a/scripts/publish_all.sh
+++ b/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 $@
+    npm publish --access public
    popd > /dev/null
 done
--- a/scripts/setup_all_packages.sh
+++ b/scripts/setup_all_packages.sh
@@ -3,17 +3,14 @@ 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
--- a/src/components/Rive.tsx
+++ b/src/components/Rive.tsx
@@ -28,27 +28,7 @@ export interface RiveProps {
   * 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,
@@ -57,10 +37,6 @@ const Rive = ({
  stateMachines,
  layout,
  useOffscreenRenderer = true,
-  shouldDisableRiveListeners = false,
-  shouldResizeCanvasToContainer = true,
-  automaticallyHandleEvents = false,
-  children,
  ...rest
 }: RiveProps & ComponentProps<'canvas'>) => {
  const params = {
@@ -70,17 +46,14 @@ const Rive = ({
    layout,
    stateMachines,
    autoplay: true,
-    shouldDisableRiveListeners,
-    automaticallyHandleEvents,
  };

  const options = {
    useOffscreenRenderer,
-    shouldResizeCanvasToContainer,
  };

  const { RiveComponent } = useRive(params, options);
-  return <RiveComponent {...rest}>{children}</RiveComponent>;
+  return <RiveComponent {...rest} />;
 };

 export default Rive;
--- a/src/hooks/useContainerSize.ts
+++ b/src/hooks/useContainerSize.ts
@@ -1,94 +0,0 @@
-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;
-}
--- a/src/hooks/useDevicePixelRatio.ts
+++ b/src/hooks/useDevicePixelRatio.ts
@@ -1,49 +0,0 @@
-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
- *
- * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
- */
-export default function useDevicePixelRatio() {
-  const dpr = getDevicePixelRatio();
-  const [currentDpr, setCurrentDpr] = useState(dpr);
-
-  useEffect(() => {
-    const canListen = typeof window !== 'undefined' && 'matchMedia' in window;
-    if (!canListen) {
-      return;
-    }
-
-    const updateDpr = () => {
-      const newDpr = 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]);
-
-  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);
-}
--- a/src/hooks/useResizeCanvas.ts
+++ b/src/hooks/useResizeCanvas.ts
@@ -1,186 +0,0 @@
-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
-   */
-  canvasRef: MutableRefObject<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,
-  canvasRef,
-  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,
-  } = presetOptions;
-
-  const containerSize = useContainerSize(
-    containerRef,
-    shouldResizeCanvasToContainer
-  );
-  const currentDevicePixelRatio = useDevicePixelRatio();
-
-  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 (canvasRef.current) {
-      // 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;
-          canvasRef.current.width = newCanvasWidthProp;
-          canvasRef.current.height = newCanvasHeightProp;
-          canvasRef.current.style.width = width + 'px';
-          canvasRef.current.style.height = height + 'px';
-          setLastCanvasSize({
-            width: newCanvasWidthProp,
-            height: newCanvasHeightProp,
-          });
-          hasResized = true;
-        }
-      } else if (boundsChanged) {
-        canvasRef.current.width = width;
-        canvasRef.current.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);
-  }, [
-    canvasRef,
-    containerRef,
-    containerSize,
-    currentDevicePixelRatio,
-    getContainerDimensions,
-    isFirstSizing,
-    setIsFirstSizing,
-    lastCanvasHeight,
-    lastCanvasWidth,
-    lastContainerHeight,
-    lastContainerWidth,
-    onCanvasHasResized,
-    shouldResizeCanvasToContainer,
-    fitCanvasToArtboardHeight,
-    shouldUseDevicePixelRatio,
-    riveLoaded,
-  ]);
-}
--- a/src/hooks/useRive.tsx
+++ b/src/hooks/useRive.tsx
@@ -7,9 +7,13 @@ import React, {
  RefCallback,
 } from 'react';
 import { Rive, EventType } from '@rive-app/canvas';
-import { UseRiveParameters, UseRiveOptions, RiveState } from '../types';
-import useResizeCanvas from './useResizeCanvas';
-import { getOptions } from '../utils';
+import {
+  UseRiveParameters,
+  UseRiveOptions,
+  RiveState,
+  Dimensions,
+} from '../types';
+import { useSize } from '../utils';

 type RiveComponentProps = {
  setContainerRef: RefCallback<HTMLElement>;
@@ -21,7 +25,6 @@ function RiveComponent({
  setCanvasRef,
  className = '',
  style,
-  children,
  ...rest
 }: RiveComponentProps & ComponentProps<'canvas'>) {
  const containerStyle = {
@@ -36,17 +39,27 @@ function RiveComponent({
      className={className}
      {...(!className && { style: containerStyle })}
    >
-      <canvas
-        ref={setCanvasRef}
-        style={{ verticalAlign: 'top', width: 0, height: 0 }}
-        {...rest}
-      >
-        {children}
-      </canvas>
+      <canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} {...rest} />
    </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.
 *
@@ -69,30 +82,92 @@ export default function useRive(
  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 size = useSize(containerRef);

  const isParamsLoaded = Boolean(riveParams);
  const options = getOptions(opts);

  /**
-   * 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
+   * 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.
   */
-  const onCanvasHasResized = useCallback(() => {
-    if (rive) {
+  function getCanvasDimensions() {
+    // getBoundingClientRect returns the scaled width and height
+    // this will result in double scaling
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+
+    const width = containerRef.current?.clientWidth ?? 0;
+    const height = containerRef.current?.clientHeight ?? 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
+    if (rive) {
      rive.resizeToCanvas();
    }
-  }, [rive]);
+  }

-  // Watch the canvas parent container resize and size the canvas to match
-  useResizeCanvas({
-    riveLoaded: !!rive,
-    canvasRef,
-    containerRef,
-    options,
-    onCanvasHasResized,
-    artboardBounds: rive?.bounds,
-  });
+  /**
+   * Listen to changes on the windowSize and the rive file being loaded
+   * and update the canvas bounds as needed.
+   *
+   * ie does not support ResizeObservers, so we fallback to the window listener there
+   */
+  useEffect(() => {
+    if (rive) {
+      updateBounds();
+    }
+  }, [rive, size]);

  /**
   * Ref callback called when the canvas element mounts and unmounts.
@@ -111,9 +186,6 @@ export default function useRive(
          // on an unmounted component in some rare cases
          if (canvasRef.current) {
            setRive(r);
-          } else {
-            // If unmounted, cleanup the rive object immediately
-            r.cleanup();
          }
        });
      } else if (canvas === null && canvasRef.current) {
@@ -156,13 +228,12 @@ export default function useRive(
  }, [rive]);

  /**
-   * On unmount, call cleanup to cleanup any WASM generated objects that need
-   * to be manually destroyed.
+   * On unmount, stop rive from rendering.
   */
  useEffect(() => {
    return () => {
      if (rive) {
-        rive.cleanup();
+        rive.stop();
        setRive(null);
      }
    };
@@ -194,12 +265,11 @@ export default function useRive(
        />
      );
    },
-    [setCanvasRef, setContainerRef]
+    []
  );

  return {
    canvas: canvasRef.current,
-    container: containerRef.current,
    setCanvasRef,
    setContainerRef,
    rive,
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,9 +1,8 @@
-import Rive, { RiveProps } from './components/Rive';
+import Rive from './components/Rive';
 import useRive from './hooks/useRive';
 import useStateMachineInput from './hooks/useStateMachineInput';
-import useResizeCanvas from './hooks/useResizeCanvas';

 export default Rive;
-export { useRive, useStateMachineInput, useResizeCanvas, RiveProps };
+export { useRive, useStateMachineInput };
 export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
 export * from '@rive-app/canvas';
--- a/src/types.ts
+++ b/src/types.ts
@@ -7,7 +7,6 @@ export type UseRiveOptions = {
  useDevicePixelRatio: boolean;
  fitCanvasToArtboardHeight: boolean;
  useOffscreenRenderer: boolean;
-  shouldResizeCanvasToContainer: boolean;
 };

 export type Dimensions = {
@@ -18,7 +17,6 @@ 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
@@ -28,7 +26,6 @@ export type Dimensions = {
 */
 export type RiveState = {
  canvas: HTMLCanvasElement | null;
-  container: HTMLElement | null;
  setCanvasRef: RefCallback<HTMLCanvasElement>;
  setContainerRef: RefCallback<HTMLElement>;
  rive: Rive | null;
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,12 +1,90 @@
-import { UseRiveOptions } from './types';
+import React, { useState, useEffect, useRef } from 'react';
+import { Dimensions } from './types';

-const defaultOptions = {
-  useDevicePixelRatio: true,
-  fitCanvasToArtboardHeight: false,
-  useOffscreenRenderer: true,
-  shouldResizeCanvasToContainer: true,
-};
-
-export function getOptions(opts: Partial<UseRiveOptions>) {
-  return Object.assign({}, defaultOptions, opts);
+// 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 = setTimeout(() => f.apply(this, args), delay) as unknown as number;
+  };
+}
+
+const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
+const hasResizeObserver = globalThis.ResizeObserver !== undefined;
+const preferResizeObserver = true;
+const throttleResizeObserver = true;
+const useResizeObserver = hasResizeObserver && preferResizeObserver;
+const useWindowListener = !useResizeObserver;
+
+export function useSize(
+  containerRef: React.MutableRefObject<HTMLElement | null>
+) {
+  const [size, setSize] = useState<Dimensions>({
+    width: 0,
+    height: 0,
+  });
+
+  // internet explorer does not support ResizeObservers.
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      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(
+      throttleResizeObserver
+        ? throttle((entries: any) => {
+            if (useResizeObserver) {
+              setSize({
+                width: entries[entries.length - 1].contentRect.width,
+                height: entries[entries.length - 1].contentRect.height,
+              });
+            }
+          }, 16)
+        : (entries: any) => {
+            if (useResizeObserver) {
+              setSize({
+                width: entries[entries.length - 1].contentRect.width,
+                height: entries[entries.length - 1].contentRect.height,
+              });
+            }
+          }
+    )
+  );
+
+  useEffect(() => {
+    const current = observer.current;
+    if (containerRef.current && useResizeObserver) {
+      current.observe(containerRef.current);
+    }
+
+    return () => {
+      current.disconnect();
+      if (containerRef.current && useResizeObserver) {
+        current.unobserve(containerRef.current);
+      }
+    };
+  }, [containerRef, observer]);
+
+  return size;
 }
--- a/test/Rive.test.tsx
+++ b/test/Rive.test.tsx
@@ -36,19 +36,4 @@ describe('Rive Component', () => {
    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();
-  });
 });
--- a/test/useRive.test.tsx
+++ b/test/useRive.test.tsx
@@ -94,9 +94,6 @@ describe('useRive', () => {
      result.current.setCanvasRef(canvasSpy);
      result.current.setContainerRef(containerSpy);
      controlledRiveloadCb();
-      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);
@@ -105,16 +102,16 @@ describe('useRive', () => {
    expect(resizeToCanvasMock).toBeCalled();
  });

-  it('calls cleanup on the rive object on unmount', async () => {
+  it('stops the rive object on unmount', async () => {
    const params = {
      src: 'file-src',
    };

-    const cleanupMock = jest.fn();
+    const stopMock = jest.fn();

    const riveMock = {
      ...baseRiveMock,
-      cleanup: cleanupMock,
+      stop: stopMock,
    };

    // @ts-ignore
@@ -130,7 +127,7 @@ describe('useRive', () => {

    unmount();

-    expect(cleanupMock).toBeCalled();
+    expect(stopMock).toBeCalled();
  });

  it('sets the a bounds with the devicePixelRatio by default', async () => {
@@ -195,7 +192,7 @@ describe('useRive', () => {
    expect(canvasSpy).toHaveAttribute('width', '100');
  });

-  it('uses artboard height to set bounds if fitCanvasToArtboardHeight is true', async () => {
+  it('uses artbound height to set bounds if fitCanvasToArtboardHeight is true', async () => {
    const params = {
      src: 'file-src',
    };
@@ -379,115 +376,4 @@ 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);
-      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);
-      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);
-      controlledRiveloadCb();
-      jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(200);
-      jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(200);
-      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);
-      controlledRiveloadCb();
-      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);
-  });
 });
--- a/test/useStateMachine.test.tsx
+++ b/test/useStateMachine.test.tsx
@@ -8,7 +8,6 @@ jest.mock('@rive-app/canvas', () => ({
  Rive: jest.fn().mockImplementation(() => ({
    on: jest.fn(),
    stop: jest.fn(),
-    stateMachineInputs: jest.fn(),
  })),
  Layout: jest.fn(),
  Fit: {
@@ -27,21 +26,6 @@ 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));
@@ -49,29 +33,31 @@ describe('useStateMachineInput', () => {
  });

  it('returns null if there is no state machine name', () => {
-    const riveMock = getRiveMock();
-
-    mocked(Rive).mockImplementation(() => riveMock);
+    const riveMock = {};
+    mocked(Rive).mockImplementation(() => riveMock as Rive);

    const { result } = renderHook(() =>
-      useStateMachineInput(riveMock, '', 'testInput')
+      useStateMachineInput(riveMock as Rive, '', 'testInput')
    );
    expect(result.current).toBeNull();
  });

  it('returns null if there is no state machine input name', () => {
-    const riveMock = getRiveMock();
+    const riveMock = {};
+    mocked(Rive).mockImplementation(() => riveMock as Rive);

    const { result } = renderHook(() =>
-      useStateMachineInput(riveMock, 'smName', '')
+      useStateMachineInput(riveMock as Rive, 'smName', '')
    );
    expect(result.current).toBeNull();
  });

  it('returns null if there are no inputs for the state machine', () => {
-    const riveMock = getRiveMock({ smiInputs: [] });
-
-    mocked(Rive).mockImplementation(() => riveMock);
+    const riveMock = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      stateMachineInputs: (_: string) => [] as StateMachineInput[],
+    };
+    mocked(Rive).mockImplementation(() => riveMock as Rive);

    const { result } = renderHook(() =>
      useStateMachineInput(riveMock as Rive, 'smName', '')
@@ -83,12 +69,14 @@ describe('useStateMachineInput', () => {
    const smInput = {
      name: 'boolInput',
    } as StateMachineInput;
-    const riveMock = getRiveMock({ smiInputs: [smInput] });
-
-    mocked(Rive).mockImplementation(() => riveMock);
+    const riveMock = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
+    };
+    mocked(Rive).mockImplementation(() => riveMock as Rive);

    const { result } = renderHook(() =>
-      useStateMachineInput(riveMock, 'smName', 'numInput')
+      useStateMachineInput(riveMock as Rive, 'smName', 'numInput')
    );
    expect(result.current).toBeNull();
  });
@@ -97,12 +85,14 @@ describe('useStateMachineInput', () => {
    const smInput = {
      name: 'boolInput',
    } as StateMachineInput;
-    const riveMock = getRiveMock({ smiInputs: [smInput] });
-
-    mocked(Rive).mockImplementation(() => riveMock);
+    const riveMock = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
+    };
+    mocked(Rive).mockImplementation(() => riveMock as Rive);

    const { result } = renderHook(() =>
-      useStateMachineInput(riveMock, 'smName', 'boolInput')
+      useStateMachineInput(riveMock as Rive, 'smName', 'boolInput')
    );
    expect(result.current).toBe(smInput);
  });
@@ -112,11 +102,14 @@ describe('useStateMachineInput', () => {
      name: 'boolInput',
      value: false,
    } as StateMachineInput;
-    const riveMock = getRiveMock({ smiInputs: [smInput] });
-    mocked(Rive).mockImplementation(() => riveMock);
+    const riveMock = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
+    };
+    mocked(Rive).mockImplementation(() => riveMock as Rive);

    const { result } = renderHook(() =>
-      useStateMachineInput(riveMock, 'smName', 'boolInput', true)
+      useStateMachineInput(riveMock as Rive, 'smName', 'boolInput', true)
    );
    expect(result.current).toStrictEqual({
      ...smInput,
Author	SHA1	Message	Date
Maxwell Talbot	25afe7d77e	adding resize example	2022-07-21 17:00:42 +02:00
Maxwell Talbot	258270b4fc	update name	2022-07-21 17:00:21 +02:00
Maxwell Talbot	41962ef864	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.	2022-07-21 10:17:27 +01:00
Maxwell Talbot	c69fffa5cf	update resize behaviour to throttle, add parameters to enable switching modes	2022-07-21 10:08:52 +01:00