mirror of
https://github.com/rive-app/rive-react.git
synced 2026-03-13 08:22:30 +08:00
Compare commits
1 Commits
v1.0.6
...
improvemen
| Author | SHA1 | Date | |
|---|---|---|---|
|
c3a061f8b0 |
@@ -19,9 +19,4 @@ module.exports = {
|
||||
'no-var': 'error',
|
||||
eqeqeq: ['error', 'smart'],
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
4
.github/workflows/publish.yml
vendored
4
.github/workflows/publish.yml
vendored
@@ -11,10 +11,10 @@ jobs:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '16.x'
|
||||
node-version: '12.x'
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
- name: Install Modules
|
||||
run: npm install
|
||||
run: npm ci
|
||||
- name: Run type check
|
||||
run: npm run types:check
|
||||
- name: Run Linter
|
||||
|
||||
2
.github/workflows/tests.yml
vendored
2
.github/workflows/tests.yml
vendored
@@ -7,7 +7,7 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
- name: Install Modules
|
||||
run: npm install
|
||||
run: npm ci
|
||||
- name: Run type check
|
||||
run: npm run types:check
|
||||
- name: Run Linter
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -5,4 +5,3 @@ dist
|
||||
.idea
|
||||
.vscode
|
||||
examples/**/package-lock.json
|
||||
package-lock.json
|
||||
@@ -12,6 +12,6 @@
|
||||
"releaseName": "${version}"
|
||||
},
|
||||
"hooks": {
|
||||
"after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"]
|
||||
"after:bump": "npx auto-changelog -p"
|
||||
}
|
||||
}
|
||||
|
||||
220
CHANGELOG.md
220
CHANGELOG.md
@@ -4,224 +4,6 @@ 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).
|
||||
|
||||
#### [v1.0.6](https://github.com/rive-app/rive-react/compare/v1.0.5...v1.0.6)
|
||||
#### 0.0.20
|
||||
|
||||
- Maint: Bump webgl dependency up to 1.0.39 [`cd9baef`](https://github.com/rive-app/rive-react/commit/cd9baef25003b491d40d5649ba1d3b5f88bce870)
|
||||
|
||||
#### [v1.0.5](https://github.com/rive-app/rive-react/compare/v1.0.4...v1.0.5)
|
||||
|
||||
> 11 April 2022
|
||||
|
||||
- Feat: Add extra param to useStateMachineInput to set an initial value on the input when its loaded [`0a18b52`](https://github.com/rive-app/rive-react/commit/0a18b522cc8efdffb0b681a7b1234d7829fee808)
|
||||
- chore: release 1.0.5 [`3a2ed32`](https://github.com/rive-app/rive-react/commit/3a2ed32856ad4de09da4a875f3b0c2967c8a8e5e)
|
||||
- update readme [`d35f5b5`](https://github.com/rive-app/rive-react/commit/d35f5b53c5c7cb2794c8891e8f30d8ba8aa403cf)
|
||||
|
||||
#### [v1.0.4](https://github.com/rive-app/rive-react/compare/v1.0.3...v1.0.4)
|
||||
|
||||
> 6 April 2022
|
||||
|
||||
- Add test for animations change on param update [`c3f1380`](https://github.com/rive-app/rive-react/commit/c3f138014d233258206bde2497baed711276e3dc)
|
||||
- chore: release 1.0.4 [`5e34e13`](https://github.com/rive-app/rive-react/commit/5e34e1356379a21c051c48f214dbce0e14a41c8b)
|
||||
- Update animations on param change [`b13413b`](https://github.com/rive-app/rive-react/commit/b13413ba8bd99d1e89cb927d194bc2179e8e9dcf)
|
||||
|
||||
#### [v1.0.3](https://github.com/rive-app/rive-react/compare/v1.0.2...v1.0.3)
|
||||
|
||||
> 31 March 2022
|
||||
|
||||
- chore: release 1.0.3 [`881e38f`](https://github.com/rive-app/rive-react/commit/881e38fe6a357503d23cc6449c1e41908ba796b0)
|
||||
- Maint: Bump rive-cpp to help fix safari and performance issues [`38c8562`](https://github.com/rive-app/rive-react/commit/38c85624a72782dd4f05a482b9c57137fe289e4c)
|
||||
|
||||
#### [v1.0.2](https://github.com/rive-app/rive-react/compare/v1.0.1...v1.0.2)
|
||||
|
||||
> 28 March 2022
|
||||
|
||||
- chore: release 1.0.2 [`a9732e1`](https://github.com/rive-app/rive-react/commit/a9732e141ec519bfc07b11a1b5b48c3d36182f4b)
|
||||
- Patch: Bump rive-cpp to fix DAG issue [`59edf6f`](https://github.com/rive-app/rive-react/commit/59edf6f67ea7d26067009786bb84014a61fe6f24)
|
||||
|
||||
#### [v1.0.1](https://github.com/rive-app/rive-react/compare/v1.0.0...v1.0.1)
|
||||
|
||||
> 24 March 2022
|
||||
|
||||
- chore: release 1.0.1 [`4be496c`](https://github.com/rive-app/rive-react/commit/4be496cc15ff7c205903f3a3ef1f44cb7ed710d4)
|
||||
- Chore: Bump webgl and remove major flag from release-it command [`4c9de18`](https://github.com/rive-app/rive-react/commit/4c9de18b1cbf19ede7d5400a1b3f67d59f882cee)
|
||||
|
||||
### [v1.0.0](https://github.com/rive-app/rive-react/compare/v0.0.31...v1.0.0)
|
||||
|
||||
> 23 March 2022
|
||||
|
||||
- Breaking: Switch from using the canvas renderer as default to the webgl renderer [`1e1cabd`](https://github.com/rive-app/rive-react/commit/1e1cabd05707fa135e1706c0821c0272b3d94bbc)
|
||||
- chore: release 1.0.0 [`c688b9f`](https://github.com/rive-app/rive-react/commit/c688b9f17a4e287b4120a0739125123ce0e880e4)
|
||||
- Put back the release steps in the publish workflow and add major flag temporarily [`8ce8562`](https://github.com/rive-app/rive-react/commit/8ce856270f9403c165b2a4c2f0b8c6558ed929a2)
|
||||
|
||||
#### [v0.0.31](https://github.com/rive-app/rive-react/compare/v0.0.30...v0.0.31)
|
||||
|
||||
> 18 January 2022
|
||||
|
||||
- chore: release 0.0.31 [`0be3bc7`](https://github.com/rive-app/rive-react/commit/0be3bc7e930ce6b39dae82e808dd81a0720a5ebb)
|
||||
- Update @rive-app/canvas to 1.0.18 to fix playback lag when animations are left idle [`48af4b0`](https://github.com/rive-app/rive-react/commit/48af4b00ad7654acde0fc5e97c9cd0f768371843)
|
||||
|
||||
#### [v0.0.30](https://github.com/rive-app/rive-react/compare/v0.0.29...v0.0.30)
|
||||
|
||||
> 10 January 2022
|
||||
|
||||
- chore: release 0.0.30 [`fe44977`](https://github.com/rive-app/rive-react/commit/fe44977e47e13276051a665559e1f68f42f47d3a)
|
||||
- Update rive/canvas to with fixes for image clipping [`24d9e87`](https://github.com/rive-app/rive-react/commit/24d9e871d6580df1b985e61793babd1067640b5b)
|
||||
|
||||
#### [v0.0.29](https://github.com/rive-app/rive-react/compare/v0.0.28...v0.0.29)
|
||||
|
||||
> 16 December 2021
|
||||
|
||||
- chore: release 0.0.29 [`8b8d6bc`](https://github.com/rive-app/rive-react/commit/8b8d6bc44bfcecd6f126dcaa9c6c4cb7fda9b6ac)
|
||||
- Bump rive-app/canvas to 1.0.8 [`2517efa`](https://github.com/rive-app/rive-react/commit/2517efaebd4ccc6270be52c2947acc9190f858cc)
|
||||
- Add offscreencanvas types [`956b76d`](https://github.com/rive-app/rive-react/commit/956b76d01c59a04eb83f3b0b2ca722798af80fb2)
|
||||
|
||||
#### [v0.0.28](https://github.com/rive-app/rive-react/compare/v0.0.27...v0.0.28)
|
||||
|
||||
> 16 December 2021
|
||||
|
||||
- Use @rive-app/canvas directly to fix path issues in downstream libs [`e599b1a`](https://github.com/rive-app/rive-react/commit/e599b1a38cc0f6606d7505551a046b28a3533422)
|
||||
- chore: release 0.0.28 [`019cadf`](https://github.com/rive-app/rive-react/commit/019cadf5f22d87a0449ff1aecfdc242a26e64a46)
|
||||
|
||||
#### [v0.0.27](https://github.com/rive-app/rive-react/compare/v0.0.26...v0.0.27)
|
||||
|
||||
> 16 December 2021
|
||||
|
||||
- Use @rive-app/canvas as underlying repo [`e6b036e`](https://github.com/rive-app/rive-react/commit/e6b036ee17db316f189773a801f6ade514f44d4d)
|
||||
- Update basic example to listen to changes in parent directory [`bfbb8a5`](https://github.com/rive-app/rive-react/commit/bfbb8a59ee3284d9512f0006ad518afdc1a801ea)
|
||||
- chore: release 0.0.27 [`78d3118`](https://github.com/rive-app/rive-react/commit/78d3118dcc648dc8755ec23cb79ef2724a9b4d05)
|
||||
|
||||
#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.25...v0.0.26)
|
||||
|
||||
> 16 November 2021
|
||||
|
||||
- bump rive-js to0.7.33 [`c4dc027`](https://github.com/rive-app/rive-react/commit/c4dc027522502f6aaa0f85392a5e90396c8b719d)
|
||||
- chore: release 0.0.26 [`5a19354`](https://github.com/rive-app/rive-react/commit/5a19354ab3fcf128b52973bb1882690f98b0ebe2)
|
||||
|
||||
#### [v0.0.25](https://github.com/rive-app/rive-react/compare/v0.0.24...v0.0.25)
|
||||
|
||||
> 12 November 2021
|
||||
|
||||
- Update rive-js to 0.7.32 to fixed nested artboard speed [`1a59794`](https://github.com/rive-app/rive-react/commit/1a597943cb629be520052f2a86733998f44d6885)
|
||||
- chore: release 0.0.25 [`e54a0d4`](https://github.com/rive-app/rive-react/commit/e54a0d42d3910c39a944a144a856a33cae87f3ed)
|
||||
|
||||
#### [v0.0.24](https://github.com/rive-app/rive-react/compare/v0.0.23...v0.0.24)
|
||||
|
||||
> 12 November 2021
|
||||
|
||||
- Update package.json to version 2 [`a4777ec`](https://github.com/rive-app/rive-react/commit/a4777ec7e33ded6a3581c88f2e708f45f7ea1828)
|
||||
- chore: release 0.0.24 [`026d097`](https://github.com/rive-app/rive-react/commit/026d0976582eaeb68daf09977fef5d16917c09d8)
|
||||
|
||||
#### [v0.0.23](https://github.com/rive-app/rive-react/compare/v0.0.22...v0.0.23)
|
||||
|
||||
> 8 November 2021
|
||||
|
||||
- chore: release 0.0.23 [`416334e`](https://github.com/rive-app/rive-react/commit/416334ef44b7a9bdaa8c6ff8dac937cfda59d77d)
|
||||
- Add verticalAlign = top to canvas to prevent canvas growth on resize [`f309481`](https://github.com/rive-app/rive-react/commit/f309481a43307b1e2b7f77cd418498cacd8022d2)
|
||||
|
||||
#### [v0.0.22](https://github.com/rive-app/rive-react/compare/v0.0.21...v0.0.22)
|
||||
|
||||
> 15 October 2021
|
||||
|
||||
- chore: release 0.0.22 [`06500e6`](https://github.com/rive-app/rive-react/commit/06500e6dcf38165ac8b5f7bf60e0503666947819)
|
||||
- Bump rive-js version to 0.7.31 [`33e34a4`](https://github.com/rive-app/rive-react/commit/33e34a46e1e394d67d6981307534fb5512df9dcf)
|
||||
|
||||
#### [v0.0.21](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.21)
|
||||
|
||||
> 10 September 2021
|
||||
|
||||
- Update examples to use latest rive-react [`5d08228`](https://github.com/rive-app/rive-react/commit/5d0822836cbc7c5645d7580173c3cdda772b616d)
|
||||
- chore: release 0.0.21 [`c8f57f5`](https://github.com/rive-app/rive-react/commit/c8f57f58960987d238ca48646b354c460bfeee59)
|
||||
|
||||
#### [v0.0.20](https://github.com/rive-app/rive-react/compare/v0.0.19...v0.0.20)
|
||||
|
||||
> 7 September 2021
|
||||
|
||||
- chore: release 0.0.20 [`1c3cc69`](https://github.com/rive-app/rive-react/commit/1c3cc69f401b91810105b16ccce1dd7612da037a)
|
||||
- rive-0.7.30: Fix ghosting where aspect ratio of canvas is different to that of artboard [`44056eb`](https://github.com/rive-app/rive-react/commit/44056eb5654e90de6ba10ed4892a4e2a5ebf6716)
|
||||
|
||||
#### [v0.0.19](https://github.com/rive-app/rive-react/compare/v0.0.18...v0.0.19)
|
||||
|
||||
> 7 September 2021
|
||||
|
||||
- chore: release 0.0.19 [`a9c3233`](https://github.com/rive-app/rive-react/commit/a9c3233452d9f6465c761cda0763d314ba712267)
|
||||
- Update rive-js to 0.7.29 [`ce2c706`](https://github.com/rive-app/rive-react/commit/ce2c7065f567e43cfcca4c8f98e98aaf6e92f4c3)
|
||||
|
||||
#### [v0.0.18](https://github.com/rive-app/rive-react/compare/v0.0.17...v0.0.18)
|
||||
|
||||
> 12 August 2021
|
||||
|
||||
- chore: release 0.0.18 [`203faf9`](https://github.com/rive-app/rive-react/commit/203faf9ce22ee307af815ebdc2790f6bacbe0016)
|
||||
- Update rive-js version to 0.7.25 [`fd0efb1`](https://github.com/rive-app/rive-react/commit/fd0efb1b815ae833e3b50b643b00464542f6f800)
|
||||
|
||||
#### [v0.0.17](https://github.com/rive-app/rive-react/compare/v0.0.16...v0.0.17)
|
||||
|
||||
> 12 August 2021
|
||||
|
||||
- chore: release 0.0.17 [`11b6f2e`](https://github.com/rive-app/rive-react/commit/11b6f2e8792781ad38dce745f080b69a94c35c3a)
|
||||
- Update rive-js version to 0.7.24 [`8a1adf1`](https://github.com/rive-app/rive-react/commit/8a1adf147d25f4616ef048a84986314e9397ad43)
|
||||
|
||||
#### [v0.0.16](https://github.com/rive-app/rive-react/compare/v0.0.15...v0.0.16)
|
||||
|
||||
> 11 August 2021
|
||||
|
||||
- chore: release 0.0.16 [`80ffb5e`](https://github.com/rive-app/rive-react/commit/80ffb5ee2d3b3dd22d1c229e1f4e772e7fe763b3)
|
||||
- Update rive-js version to 0.7.23 [`cf1baa6`](https://github.com/rive-app/rive-react/commit/cf1baa6661f643996e37b26a5a9a6dd9a9950e06)
|
||||
|
||||
#### [v0.0.15](https://github.com/rive-app/rive-react/compare/v0.0.14...v0.0.15)
|
||||
|
||||
> 30 July 2021
|
||||
|
||||
- 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)
|
||||
|
||||
> 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)
|
||||
|
||||
#### [v0.0.11](https://github.com/rive-app/rive-react/compare/v0.0.10...v0.0.11)
|
||||
|
||||
> 14 July 2021
|
||||
|
||||
- Update README with camelCase params [`#26`](https://github.com/rive-app/rive-react/pull/26)
|
||||
- Update README with camel case params [`14b7746`](https://github.com/rive-app/rive-react/commit/14b774676b41fa3082cb6554ee2062aa7d773da9)
|
||||
- chore: release 0.0.11 [`9db4ee5`](https://github.com/rive-app/rive-react/commit/9db4ee52bf919add026c4c5487a5ca399cc0b823)
|
||||
|
||||
#### [v0.0.10](https://github.com/rive-app/rive-react/compare/v0.0.9...v0.0.10)
|
||||
|
||||
> 28 June 2021
|
||||
|
||||
- Include types in npm publish [`#23`](https://github.com/rive-app/rive-react/pull/23)
|
||||
- chore: release 0.0.10 [`0b14c4c`](https://github.com/rive-app/rive-react/commit/0b14c4cd4cc49f6b7b1567b23752688092ca73b4)
|
||||
|
||||
#### [v0.0.9](https://github.com/rive-app/rive-react/compare/v0.0.8...v0.0.9)
|
||||
|
||||
> 28 June 2021
|
||||
|
||||
- Fix build automation and only include dist files [`#22`](https://github.com/rive-app/rive-react/pull/22)
|
||||
- chore: release 0.0.9 [`2ec726c`](https://github.com/rive-app/rive-react/commit/2ec726cf12361254403539b30ebafb9adef9254d)
|
||||
|
||||
#### v0.0.8
|
||||
|
||||
> 28 June 2021
|
||||
|
||||
- Add release it dependency [`#21`](https://github.com/rive-app/rive-react/pull/21)
|
||||
- add release it for automated github releases and npm publish [`#20`](https://github.com/rive-app/rive-react/pull/20)
|
||||
- Add token to publish step [`#17`](https://github.com/rive-app/rive-react/pull/17)
|
||||
- Publish on merge to master [`#16`](https://github.com/rive-app/rive-react/pull/16)
|
||||
- version bump [`#15`](https://github.com/rive-app/rive-react/pull/15)
|
||||
- Bump rive-js version to 0.7.15 [`#14`](https://github.com/rive-app/rive-react/pull/14)
|
||||
- lower react peer dependency version [`#13`](https://github.com/rive-app/rive-react/pull/13)
|
||||
- Bump version to 0.0.5 [`#12`](https://github.com/rive-app/rive-react/pull/12)
|
||||
- Add Readme and change Rive Component [`#11`](https://github.com/rive-app/rive-react/pull/11)
|
||||
- Export rive-js types [`#10`](https://github.com/rive-app/rive-react/pull/10)
|
||||
- Add eslint and prettier configs [`#9`](https://github.com/rive-app/rive-react/pull/9)
|
||||
- Add basic github action for running tests [`#8`](https://github.com/rive-app/rive-react/pull/8)
|
||||
- Add typescript example [`#7`](https://github.com/rive-app/rive-react/pull/7)
|
||||
- Add examples for using rive-react [`#1`](https://github.com/rive-app/rive-react/pull/1)
|
||||
- Initial commit of existing implementation [`3b1d759`](https://github.com/rive-app/rive-react/commit/3b1d7593fe95da652857f7d362f90d8facad05ee)
|
||||
- Add changelog managed by auto-changelog [`5916f38`](https://github.com/rive-app/rive-react/commit/5916f384bbcb8af250a5ae3fb6f4061a742551a0)
|
||||
- Update README.md with usage docs [`c0a6b83`](https://github.com/rive-app/rive-react/commit/c0a6b835eacc2939f82923fb0c6c2d3b3cc12ed2)
|
||||
|
||||
52
README.md
52
README.md
@@ -22,30 +22,6 @@ npm i --save rive-react
|
||||
|
||||
_Note: This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._
|
||||
|
||||
### Migrating from v 0.0.x to 1.x.x
|
||||
|
||||
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.
|
||||
|
||||
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`.
|
||||
|
||||
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:
|
||||
|
||||
```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,
|
||||
});
|
||||
|
||||
// or you can override the flag in JSX via props
|
||||
return (
|
||||
<Rive src="foo.riv" useOffscreenRenderer={false} />
|
||||
);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Component
|
||||
@@ -97,7 +73,7 @@ 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.
|
||||
- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .rive file.
|
||||
- `opts`: Rive React specific options.
|
||||
|
||||
#### Return Values
|
||||
@@ -130,7 +106,6 @@ export default Example;
|
||||
|
||||
- `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
|
||||
|
||||
@@ -140,36 +115,29 @@ The `useStateMachineInput` hook is provided to make it easier to interact with s
|
||||
import { useRive, useStateMachineInput } from 'rive-react';
|
||||
|
||||
function Example() {
|
||||
const STATE_MACHINE_NAME = 'button';
|
||||
const INPUT_NAME = 'onClick';
|
||||
|
||||
const { RiveComponent, rive } = useRive({
|
||||
src: 'button.riv',
|
||||
stateMachines: STATE_MACHINE_NAME,
|
||||
stateMachines: 'button',
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
const onClickInput = useStateMachineInput(
|
||||
rive,
|
||||
STATE_MACHINE_NAME,
|
||||
INPUT_NAME
|
||||
);
|
||||
const onClickInput = useStateMachineInput({
|
||||
rive: rive,
|
||||
stateMachineName: 'button',
|
||||
inputName: 'onClick',
|
||||
});
|
||||
|
||||
// This example is using a state machine with a trigger input.
|
||||
return <RiveComponent onClick={() => onClickInput.fire()} />;
|
||||
return <RiveComponent onClick={() => onClickInput && 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
|
||||
#### params
|
||||
|
||||
- `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
|
||||
|
||||
@@ -177,4 +145,4 @@ A Rive.js `stateMachineInput` object.
|
||||
|
||||
## Examples
|
||||
|
||||
The [examples](examples) shows a number of different ways to use Rive React. See the instructions for each example to run locally.
|
||||
The `examples` shows a number of different ways to use Rive React. See the instructions for each example to run locally.
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "latest",
|
||||
"rive-react": "0.0.1",
|
||||
"typescript": "^4.3.2",
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useRive, UseRiveParameters } from 'rive-react';
|
||||
import { useRive, UseRiveParameters } from "rive-react";
|
||||
|
||||
function App() {
|
||||
const params: UseRiveParameters = {
|
||||
src: 'poison-loader.riv',
|
||||
src: "poison-loader.riv",
|
||||
autoplay: true,
|
||||
};
|
||||
|
||||
@@ -10,7 +10,7 @@ function App() {
|
||||
|
||||
return (
|
||||
// The animation will fit to the parent element.
|
||||
<div style={{ height: '500px', width: '500px' }}>
|
||||
<div style={{ height: "500px", width: "500px" }}>
|
||||
<RiveComponent />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "latest",
|
||||
"rive-react": "0.0.1",
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useRive } from 'rive-react';
|
||||
import { useRive } from "rive-react";
|
||||
|
||||
function App() {
|
||||
const params = {
|
||||
src: 'poison-loader.riv',
|
||||
src: "poison-loader.riv",
|
||||
autoplay: true,
|
||||
};
|
||||
|
||||
@@ -10,7 +10,7 @@ function App() {
|
||||
|
||||
return (
|
||||
// The animation will fit to the parent element.
|
||||
<div style={{ height: '500px', width: '500px' }}>
|
||||
<div style={{ height: "500px", width: "500px" }}>
|
||||
<RiveComponent />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"@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": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "file:../..",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "latest",
|
||||
"rive-react": "0.0.1",
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useRive } from 'rive-react';
|
||||
import { useRive } from "rive-react";
|
||||
|
||||
function App() {
|
||||
const params = {
|
||||
src: 'poison-loader.riv',
|
||||
src: "poison-loader.riv",
|
||||
autoplay: false,
|
||||
};
|
||||
|
||||
@@ -23,7 +23,7 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ height: '600px', width: '600px' }}>
|
||||
<div style={{ height: "600px", width: "600px" }}>
|
||||
<RiveComponent onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "latest",
|
||||
"rive-react": "0.0.1",
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<title>Rive React - Play/Pause Button</title>
|
||||
<title>Rive React - Basic with Hook</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRive } from 'rive-react';
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRive } from "rive-react";
|
||||
|
||||
function App() {
|
||||
const [buttonText, setButtonText] = useState('Pause');
|
||||
const [buttonText, setButtonText] = useState("Pause");
|
||||
const { RiveComponent, rive } = useRive({
|
||||
src: 'poison-loader.riv',
|
||||
src: "poison-loader.riv",
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
@@ -12,13 +12,13 @@ function App() {
|
||||
if (rive) {
|
||||
// "play" event is fired when the animation starts to play, so we update
|
||||
// button text on this event.
|
||||
rive.on('play', () => {
|
||||
setButtonText('Pause');
|
||||
rive.on("play", () => {
|
||||
setButtonText("Pause");
|
||||
});
|
||||
|
||||
// As above, the "pause" event is fired when the animation pauses.
|
||||
rive.on('pause', () => {
|
||||
setButtonText('Play');
|
||||
rive.on("pause", () => {
|
||||
setButtonText("Play");
|
||||
});
|
||||
}
|
||||
// We listen for changes to the rive object. The rive object will be null
|
||||
@@ -40,7 +40,7 @@ function App() {
|
||||
return (
|
||||
// The animation will fit to the parent element, so we set a large height
|
||||
// and width for this example.
|
||||
<div style={{ height: '500px', width: '500px' }}>
|
||||
<div style={{ height: "500px", width: "500px" }}>
|
||||
<RiveComponent />
|
||||
<button onClick={onButtonClick}>{buttonText}</button>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"name": "state-machine-boolean-input",
|
||||
"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": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "latest",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!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 - State Machine Boolean Input</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
import { useRive, useStateMachineInput } from 'rive-react';
|
||||
|
||||
function App() {
|
||||
const STATE_MACHINE_NAME = 'State Machine 1';
|
||||
const ON_HOVER_INPUT_NAME = 'Hover';
|
||||
const ON_PRESSED_INPUT_NAME = 'Pressed';
|
||||
|
||||
const { RiveComponent, rive } = useRive({
|
||||
src: 'like.riv',
|
||||
stateMachines: STATE_MACHINE_NAME,
|
||||
artboard: 'New Artboard',
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
// Both onHoverInput and onPressedInput are boolean inputs. To transition
|
||||
// states we need to set the value property to true or false.
|
||||
const onHoverInput = useStateMachineInput(
|
||||
rive,
|
||||
STATE_MACHINE_NAME,
|
||||
ON_HOVER_INPUT_NAME
|
||||
);
|
||||
const onPressedInput = useStateMachineInput(
|
||||
rive,
|
||||
STATE_MACHINE_NAME,
|
||||
ON_PRESSED_INPUT_NAME
|
||||
);
|
||||
|
||||
function onMouseEnter() {
|
||||
onHoverInput.value = true;
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
onHoverInput.value = false;
|
||||
}
|
||||
|
||||
function onMouseDown() {
|
||||
onPressedInput.value = true;
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
onPressedInput.value = false;
|
||||
}
|
||||
|
||||
return (
|
||||
// The animation will fit to the parent element, so we set a large height
|
||||
// and width for this example.
|
||||
<div style={{ height: '500px', width: '500px' }}>
|
||||
<RiveComponent
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseDown={onMouseDown}
|
||||
onMouseUp={onMouseUp}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
@@ -1,4 +1,4 @@
|
||||
# State Machine Boolean Input
|
||||
# State Machine Button
|
||||
|
||||
This example shows how to interact with a state machine, using various onMouse\* callbacks to trigger transations.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "state-machine-number-input",
|
||||
"name": "state-machine-button",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
@@ -9,7 +9,7 @@
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "latest",
|
||||
"rive-react": "0.0.1",
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
@@ -8,7 +8,7 @@
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<title>Rive React - State Machine Number Input</title>
|
||||
<title>Rive React - Basic with Hook</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
54
examples/state-machine-button/src/App.js
Normal file
54
examples/state-machine-button/src/App.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import { useRive, useStateMachineInput } from "rive-react";
|
||||
|
||||
function App() {
|
||||
const { RiveComponent, rive } = useRive({
|
||||
src: "like.riv",
|
||||
stateMachines: "State Machine 1",
|
||||
artboard: "New Artboard",
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
const hoverInput = useStateMachineInput(rive, "State Machine 1", "Hover");
|
||||
const pressedInput = useStateMachineInput(rive, "State Machine 1", "Pressed");
|
||||
|
||||
function onMouseEnter() {
|
||||
// state machine inputs will be null until the rive file has loaded, so we
|
||||
// put these guards in place to avoid any errors.
|
||||
if (hoverInput) {
|
||||
hoverInput.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
if (hoverInput) {
|
||||
hoverInput.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown() {
|
||||
if (pressedInput) {
|
||||
pressedInput.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
if (pressedInput) {
|
||||
pressedInput.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
// The animation will fit to the parent element, so we set a large height
|
||||
// and width for this example.
|
||||
<div style={{ height: "500px", width: "500px" }}>
|
||||
<RiveComponent
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseDown={onMouseDown}
|
||||
onMouseUp={onMouseUp}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
10
examples/state-machine-button/src/index.js
Normal file
10
examples/state-machine-button/src/index.js
Normal file
@@ -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")
|
||||
);
|
||||
@@ -1,14 +0,0 @@
|
||||
# State Machine Number Input
|
||||
|
||||
This example shows how to interact with a state machine with number inputs. We trigger the transistions by changing the value of a number input.
|
||||
|
||||
## To Run
|
||||
|
||||
This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
|
||||
|
||||
To install and run:
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
Binary file not shown.
@@ -1,34 +0,0 @@
|
||||
import { useRive, useStateMachineInput } from 'rive-react';
|
||||
|
||||
function App() {
|
||||
const STATE_MACHINE_NAME = 'State Machine ';
|
||||
const INPUT_NAME = 'Level';
|
||||
|
||||
const { RiveComponent, rive } = useRive({
|
||||
src: 'skills.riv',
|
||||
stateMachines: STATE_MACHINE_NAME,
|
||||
artboard: 'New Artboard',
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
||||
return (
|
||||
// The animation will fit to the parent element, so we set a large height
|
||||
// and width for this example.
|
||||
<div style={{ height: '500px', width: '500px' }}>
|
||||
<RiveComponent />
|
||||
<div>
|
||||
Level:
|
||||
<button onClick={() => (levelInput.value = 0)}>0</button>
|
||||
<button onClick={() => (levelInput.value = 1)}>1</button>
|
||||
<button onClick={() => (levelInput.value = 2)}>2</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
@@ -1,14 +0,0 @@
|
||||
# State Machine Trigger Input
|
||||
|
||||
This example shows how to interact with a state machine with a trigger input. We call the `fire()` function on the state machine input to transition the state when the animation is clicked.
|
||||
|
||||
## To Run
|
||||
|
||||
This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
|
||||
|
||||
To install and run:
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"name": "state-machine-trigger-input",
|
||||
"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": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"rive-react": "latest",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!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 - State Machine Trigger Input</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -1,31 +0,0 @@
|
||||
import { useRive, useStateMachineInput } from 'rive-react';
|
||||
|
||||
function App() {
|
||||
const STATE_MACHINE_NAME = 'State Machine 1';
|
||||
const INPUT_NAME = 'Pressed';
|
||||
|
||||
const { RiveComponent, rive } = useRive({
|
||||
src: 'piggy-bank.riv',
|
||||
stateMachines: STATE_MACHINE_NAME,
|
||||
artboard: 'New Artboard',
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
// pressedInput in a trigger state machine input. To transition the state
|
||||
// we need to call the `fire()` method on the input.
|
||||
const pressedInput = 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.
|
||||
<div style={{ height: '500px', width: '500px' }}>
|
||||
<RiveComponent onClick={() => pressedInput.fire()} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
8103
package-lock.json
generated
Normal file
8103
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rive-react",
|
||||
"version": "1.0.6",
|
||||
"version": "0.0.20",
|
||||
"description": "React wrapper around the rive-js library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
@@ -10,7 +10,6 @@
|
||||
"scripts": {
|
||||
"test": "jest",
|
||||
"build": "bunchee src/index.ts -m --no-sourcemap",
|
||||
"dev": "watch 'npm run build' src",
|
||||
"lint": "eslint -c .eslintrc.js 'src/**/*{.ts,.tsx}'",
|
||||
"format": "prettier --write src",
|
||||
"types:check": "tsc --noEmit",
|
||||
@@ -27,7 +26,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {
|
||||
"@rive-app/webgl": "1.0.39"
|
||||
"rive-js": "0.7.30"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
@@ -36,14 +35,13 @@
|
||||
"@testing-library/jest-dom": "^5.13.0",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/react-hooks": "^7.0.0",
|
||||
"@types/jest": "^27.0.3",
|
||||
"@types/offscreencanvas": "^2019.6.4",
|
||||
"@types/jest": "^26.0.23",
|
||||
"@types/react": "^17.0.9",
|
||||
"@types/testing-library__jest-dom": "^5.9.5",
|
||||
"@typescript-eslint/eslint-plugin": "^5.7.0",
|
||||
"@typescript-eslint/parser": "^5.7.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.26.0",
|
||||
"@typescript-eslint/parser": "^4.26.0",
|
||||
"auto-changelog": "^2.3.0",
|
||||
"bunchee": "^1.7.3",
|
||||
"bunchee": "^1.6.0",
|
||||
"eslint": "^7.28.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-config-standard": "^16.0.3",
|
||||
@@ -51,14 +49,12 @@
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"eslint-plugin-promise": "^5.1.0",
|
||||
"eslint-plugin-react": "^7.27.1",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"jest": "^27.0.4",
|
||||
"prettier": "^2.3.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"release-it": "^14.10.0",
|
||||
"ts-jest": "^27.1.1",
|
||||
"typescript": "^4.5.4",
|
||||
"watch": "^1.0.2"
|
||||
"ts-jest": "^27.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ window.IntersectionObserver = class IntersectionObserver {
|
||||
unobserve() {}
|
||||
};
|
||||
|
||||
jest.mock('@rive-app/webgl', () => ({
|
||||
jest.mock('rive-js', () => ({
|
||||
Rive: jest.fn().mockImplementation(() => ({
|
||||
on: jest.fn(),
|
||||
stop: jest.fn(),
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Layout } from '@rive-app/webgl';
|
||||
import { Layout } from 'rive-js';
|
||||
import React, { ComponentProps } from 'react';
|
||||
import useRive from '../hooks/useRive';
|
||||
|
||||
@@ -7,7 +7,6 @@ export type RiveProps = {
|
||||
artboard?: string;
|
||||
animations?: string | string[];
|
||||
layout?: Layout;
|
||||
useOffscreenRenderer?: boolean;
|
||||
};
|
||||
|
||||
const Rive = ({
|
||||
@@ -15,7 +14,6 @@ const Rive = ({
|
||||
artboard,
|
||||
animations,
|
||||
layout,
|
||||
useOffscreenRenderer = true,
|
||||
...rest
|
||||
}: RiveProps & ComponentProps<'div'>) => {
|
||||
const params = {
|
||||
@@ -26,11 +24,7 @@ const Rive = ({
|
||||
autoplay: true,
|
||||
};
|
||||
|
||||
const options = {
|
||||
useOffscreenRenderer,
|
||||
};
|
||||
|
||||
const { RiveComponent } = useRive(params, options);
|
||||
const { RiveComponent } = useRive(params);
|
||||
return <RiveComponent {...rest} />;
|
||||
};
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ import React, {
|
||||
ComponentProps,
|
||||
RefCallback,
|
||||
} from 'react';
|
||||
import { Rive, EventType } from '@rive-app/webgl';
|
||||
import { Rive, EventType, StateMachineInputType } from 'rive-js';
|
||||
import {
|
||||
UseRiveParameters,
|
||||
UseRiveOptions,
|
||||
@@ -36,7 +36,7 @@ function RiveComponent({
|
||||
style={'className' in rest ? undefined : containerStyle}
|
||||
{...rest}
|
||||
>
|
||||
<canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} />
|
||||
<canvas ref={setCanvasRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -44,7 +44,6 @@ function RiveComponent({
|
||||
const defaultOptions = {
|
||||
useDevicePixelRatio: true,
|
||||
fitCanvasToArtboardHeight: false,
|
||||
useOffscreenRenderer: true,
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -165,12 +164,7 @@ export default function useRive(
|
||||
const setCanvasRef: RefCallback<HTMLCanvasElement> = useCallback(
|
||||
(canvas: HTMLCanvasElement | null) => {
|
||||
if (canvas && riveParams) {
|
||||
const { useOffscreenRenderer } = options;
|
||||
const r = new Rive({
|
||||
useOffscreenRenderer,
|
||||
...riveParams,
|
||||
canvas,
|
||||
});
|
||||
const r = new Rive({ ...riveParams, canvas });
|
||||
r.on(EventType.Load, () => setRive(r));
|
||||
} else if (canvas === null && canvasRef.current) {
|
||||
canvasRef.current.height = 0;
|
||||
@@ -224,17 +218,6 @@ export default function useRive(
|
||||
};
|
||||
}, [rive]);
|
||||
|
||||
/**
|
||||
* Listen for changes in the animations params
|
||||
*/
|
||||
const animations = riveParams?.animations;
|
||||
useEffect(() => {
|
||||
if (rive && animations) {
|
||||
rive.stop(rive.animationNames);
|
||||
rive.play(animations);
|
||||
}
|
||||
}, [animations, rive]);
|
||||
|
||||
const Component = useCallback((props: ComponentProps<'div'>): JSX.Element => {
|
||||
return (
|
||||
<RiveComponent
|
||||
@@ -245,7 +228,34 @@ export default function useRive(
|
||||
);
|
||||
}, []);
|
||||
|
||||
const debug = useCallback(() => {
|
||||
if (!rive) {
|
||||
console.log({
|
||||
loaded: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const stateMachines = rive.stateMachineNames.map((stateMachineName) => ({
|
||||
stateMachineName,
|
||||
stateMachineInputs: (rive.stateMachineInputs(stateMachineName) ?? []).map(
|
||||
(stateMachineInput) => ({
|
||||
name: stateMachineInput.name,
|
||||
value: stateMachineInput.value,
|
||||
type: StateMachineInputType[stateMachineInput.type],
|
||||
})
|
||||
),
|
||||
}));
|
||||
|
||||
console.log({
|
||||
activeArtboard: rive.activeArtboard,
|
||||
animationsNames: rive.animationNames,
|
||||
stateMachines,
|
||||
});
|
||||
}, [rive]);
|
||||
|
||||
return {
|
||||
debug,
|
||||
canvas: canvasRef.current,
|
||||
setCanvasRef,
|
||||
setContainerRef,
|
||||
|
||||
@@ -1,34 +1,31 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Rive, StateMachineInput } from '@rive-app/webgl';
|
||||
import { Rive, StateMachineInput } from 'rive-js';
|
||||
import { UseStateMachineInputParameters } from '../types';
|
||||
|
||||
/**
|
||||
* Custom hook for fetching a stateMachine input from a rive file.
|
||||
*
|
||||
* @param rive - Rive instance
|
||||
* @param stateMachineName - Name of the state machine
|
||||
* @param inputName - Name of the input
|
||||
* @param params.rive - Rive Instance
|
||||
* @param params.stateMachineName - Name of the state machine
|
||||
* @param params.inputName - Name of the state machine input
|
||||
* @returns
|
||||
*/
|
||||
export default function useStateMachineInput(
|
||||
rive: Rive | null,
|
||||
stateMachineName?: string,
|
||||
inputName?: string,
|
||||
initialValue?: number | boolean
|
||||
params: UseStateMachineInputParameters
|
||||
) {
|
||||
const [input, setInput] = useState<StateMachineInput | null>(null);
|
||||
|
||||
const { rive, stateMachineName, inputName } = params;
|
||||
|
||||
useEffect(() => {
|
||||
if (!rive || !stateMachineName || !inputName) {
|
||||
setInput(null);
|
||||
}
|
||||
|
||||
if (rive && stateMachineName && inputName) {
|
||||
const inputs = rive.stateMachineInputs(stateMachineName);
|
||||
const inputs = (rive as Rive).stateMachineInputs(stateMachineName);
|
||||
if (inputs) {
|
||||
const selectedInput = inputs.find((input) => input.name === inputName);
|
||||
if (initialValue !== undefined && selectedInput) {
|
||||
selectedInput.value = initialValue;
|
||||
}
|
||||
setInput(selectedInput || null);
|
||||
}
|
||||
} else {
|
||||
|
||||
@@ -5,4 +5,4 @@ import useStateMachineInput from './hooks/useStateMachineInput';
|
||||
export default Rive;
|
||||
export { useRive, useStateMachineInput };
|
||||
export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
|
||||
export * from '@rive-app/webgl';
|
||||
export * from 'rive-js';
|
||||
|
||||
16
src/types.ts
16
src/types.ts
@@ -1,12 +1,23 @@
|
||||
import { RefCallback, ComponentProps } from 'react';
|
||||
import { Rive, RiveParameters } from '@rive-app/webgl';
|
||||
import { Rive, RiveParameters } from 'rive-js';
|
||||
|
||||
/**
|
||||
* @typedef UseStateMachineInputParameters
|
||||
* @property rive - Rive Instance
|
||||
* @property stateMachineName - Name of the state machine
|
||||
* @property inputName - Name of the input
|
||||
*/
|
||||
export type UseStateMachineInputParameters = {
|
||||
rive: Rive | null;
|
||||
stateMachineName?: string;
|
||||
inputName?: string;
|
||||
};
|
||||
|
||||
export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
|
||||
|
||||
export type UseRiveOptions = {
|
||||
useDevicePixelRatio: boolean;
|
||||
fitCanvasToArtboardHeight: boolean;
|
||||
useOffscreenRenderer: boolean;
|
||||
};
|
||||
|
||||
export type Dimensions = {
|
||||
@@ -25,6 +36,7 @@ export type Dimensions = {
|
||||
* @property rive - The loaded Rive Animation
|
||||
*/
|
||||
export type RiveState = {
|
||||
debug: () => void;
|
||||
canvas: HTMLCanvasElement | null;
|
||||
setCanvasRef: RefCallback<HTMLCanvasElement>;
|
||||
setContainerRef: RefCallback<HTMLElement>;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { mocked } from 'jest-mock';
|
||||
import { renderHook, act } from '@testing-library/react-hooks';
|
||||
import { mocked } from 'ts-jest/utils';
|
||||
|
||||
import useRive from '../src/hooks/useRive';
|
||||
import * as rive from '@rive-app/webgl';
|
||||
import * as rive from 'rive-js';
|
||||
|
||||
jest.mock('@rive-app/webgl', () => ({
|
||||
jest.mock('rive-js', () => ({
|
||||
Rive: jest.fn().mockImplementation(() => ({
|
||||
on: jest.fn(),
|
||||
stop: jest.fn(),
|
||||
@@ -241,7 +241,6 @@ describe('useRive', () => {
|
||||
|
||||
const observeMock = jest.fn();
|
||||
|
||||
const restore = global.IntersectionObserver;
|
||||
global.IntersectionObserver = jest.fn().mockImplementation(() => ({
|
||||
observe: observeMock,
|
||||
}));
|
||||
@@ -267,45 +266,5 @@ describe('useRive', () => {
|
||||
});
|
||||
|
||||
expect(observeMock).toBeCalledWith(canvasSpy);
|
||||
|
||||
global.IntersectionObserver = restore;
|
||||
});
|
||||
|
||||
it('updates the playing animations when the animations param changes', async () => {
|
||||
const params = {
|
||||
src: 'file-src',
|
||||
animations: 'light',
|
||||
};
|
||||
|
||||
const playMock = jest.fn();
|
||||
const stopMock = jest.fn();
|
||||
|
||||
const riveMock = {
|
||||
on: (_: string, cb: () => void) => cb(),
|
||||
stop: stopMock,
|
||||
play: playMock,
|
||||
animationNames: ['light'],
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
mocked(rive.Rive).mockImplementation(() => riveMock);
|
||||
|
||||
const canvasSpy = document.createElement('canvas');
|
||||
|
||||
const { result, rerender } = renderHook((params) => useRive(params), {
|
||||
initialProps: params,
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
result.current.setCanvasRef(canvasSpy);
|
||||
});
|
||||
|
||||
rerender({
|
||||
src: 'file-src',
|
||||
animations: 'dark',
|
||||
});
|
||||
|
||||
expect(stopMock).toBeCalledWith(['light']);
|
||||
expect(playMock).toBeCalledWith('dark');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
import { mocked } from 'jest-mock';
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
|
||||
import useStateMachineInput from '../src/hooks/useStateMachineInput';
|
||||
import {Rive, StateMachineInput} from '@rive-app/webgl';
|
||||
|
||||
jest.mock('@rive-app/webgl', () => ({
|
||||
Rive: jest.fn().mockImplementation(() => ({
|
||||
on: jest.fn(),
|
||||
stop: jest.fn(),
|
||||
})),
|
||||
Layout: jest.fn(),
|
||||
Fit: {
|
||||
Cover: 'cover',
|
||||
},
|
||||
Alignment: {
|
||||
Center: 'center',
|
||||
},
|
||||
EventType: {
|
||||
Load: 'load',
|
||||
},
|
||||
StateMachineInputType: {
|
||||
Number: 1,
|
||||
Boolean: 2,
|
||||
Trigger: 3,
|
||||
},
|
||||
}));
|
||||
|
||||
describe('useStateMachineInput', () => {
|
||||
it('returns null if there is null rive object passed', () => {
|
||||
const { result } = renderHook(() => useStateMachineInput(null));
|
||||
expect(result.current).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null if there is no state machine name', () => {
|
||||
const riveMock = {};
|
||||
mocked(Rive).mockImplementation(() => riveMock as Rive);
|
||||
|
||||
const { result } = renderHook(() => useStateMachineInput(riveMock as Rive, '', '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 { result } = renderHook(() => useStateMachineInput(riveMock as Rive, '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 { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', ''));
|
||||
expect(result.current).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null if the input has no association to the inputs of the state machine', () => {
|
||||
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 { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', 'numInput'));
|
||||
expect(result.current).toBeNull();
|
||||
});
|
||||
|
||||
it('returns a selected input if the input requested is part of the state machine', () => {
|
||||
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 { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', 'boolInput'));
|
||||
expect(result.current).toBe(smInput);
|
||||
});
|
||||
|
||||
it('returns a selected input with an initial value if the input requested is part of the state machine', () => {
|
||||
const smInput = {
|
||||
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 { result } = renderHook(() => useStateMachineInput(riveMock as Rive, 'smName', 'boolInput', true));
|
||||
expect(result.current).toStrictEqual({
|
||||
...smInput,
|
||||
value: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -6,12 +6,11 @@
|
||||
"lib": ["esnext", "dom"],
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"noImplicitAny": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"outDir": "./dist",
|
||||
"types": ["node", "jest", "offscreencanvas"],
|
||||
"types": ["node", "jest"],
|
||||
"rootDir": "src",
|
||||
"strict": true,
|
||||
"target": "es5",
|
||||
|
||||
Reference in New Issue
Block a user