mirror of
https://github.com/rive-app/rive-react.git
synced 2026-03-13 08:22:30 +08:00
Compare commits
68 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d369817113 | ||
|
|
d68302ccb3 | ||
|
|
bbd4cc7af6 | ||
|
|
3936277f65 | ||
|
|
aa2a783d1c | ||
|
|
d8d7d64749 | ||
|
|
af3edad2c2 | ||
|
|
5326f800f7 | ||
|
|
b44f9ad9e1 | ||
|
|
b2495300b7 | ||
|
|
eb436263d7 | ||
|
|
0e6385288e | ||
|
|
78f75434fc | ||
|
|
a9c2950419 | ||
|
|
e799f64554 | ||
|
|
95a1daa4ef | ||
|
|
8a5b88c591 | ||
|
|
d3b29cf7d7 | ||
|
|
611522b3e0 | ||
|
|
89d35976d4 | ||
|
|
a7875b26a4 | ||
|
|
4653b8bea1 | ||
|
|
0d0688feb6 | ||
|
|
7a97c14c93 | ||
|
|
cff787524d | ||
|
|
a34a588ee5 | ||
|
|
aa89f2a1ba | ||
|
|
39d275b3e0 | ||
|
|
e22acf98ba | ||
|
|
2e52e35ddc | ||
|
|
f67cb244d2 | ||
|
|
c2319b8dea | ||
|
|
877e43e354 | ||
|
|
6a033a99d3 | ||
|
|
88f7558ddf | ||
|
|
cfe3a298fb | ||
|
|
8e24185f3f | ||
|
|
5fad06d4bd | ||
|
|
df14bc383b | ||
|
|
b8dc1e5371 | ||
|
|
1196dd4c4e | ||
|
|
06ceb3cdb0 | ||
|
|
acaa12f7fc | ||
|
|
0acf384570 | ||
|
|
97a29acfdc | ||
|
|
5eb5ccfdaa | ||
|
|
edcc2c1320 | ||
|
|
68d8ca44fa | ||
|
|
ee9b83d764 | ||
|
|
187066c2cb | ||
|
|
427d74d14f | ||
|
|
061377432e | ||
|
|
53d7548b15 | ||
|
|
e1a4ca0058 | ||
|
|
83ebd6776d | ||
|
|
75dac6fe64 | ||
|
|
e13c023933 | ||
|
|
95183ff8d5 | ||
|
|
64416e0b4d | ||
|
|
1c6837bf92 | ||
|
|
15330ababe | ||
|
|
af70b8150d | ||
|
|
a984e007f4 | ||
|
|
04d8e01f87 | ||
|
|
44e46c5dee | ||
|
|
323e92e636 | ||
|
|
a07fa02ed6 | ||
|
|
d710e1e4b2 |
227
CHANGELOG.md
227
CHANGELOG.md
@@ -4,8 +4,235 @@ 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.9.2](https://github.com/rive-app/rive-react/compare/v4.9.1...v4.9.2)
|
||||
|
||||
- bump rive canvas to 2.15.2 [`d68302c`](https://github.com/rive-app/rive-react/commit/d68302ccb3f5756b753f29897033da2c0aa015d5)
|
||||
|
||||
#### [v4.9.1](https://github.com/rive-app/rive-react/compare/v4.9.0...v4.9.1)
|
||||
|
||||
> 30 April 2024
|
||||
|
||||
- chore: release 4.9.1 [`bbd4cc7`](https://github.com/rive-app/rive-react/commit/bbd4cc7af651df5fb5f28313b7e7e55e294a0282)
|
||||
- update to version 2.15.1 [`3936277`](https://github.com/rive-app/rive-react/commit/3936277f658981f6928bf0ef77ea01bb60ce27c5)
|
||||
|
||||
#### [v4.9.0](https://github.com/rive-app/rive-react/compare/v4.8.10...v4.9.0)
|
||||
|
||||
> 24 April 2024
|
||||
|
||||
- chore: release 4.9.0 [`aa2a783`](https://github.com/rive-app/rive-react/commit/aa2a783d1c5e6560f59fc8299858d68464a28308)
|
||||
- chore: bump rive wasm to v2.15.0 [`d8d7d64`](https://github.com/rive-app/rive-react/commit/d8d7d64749ff019edd6d50ea98dea9000967071a)
|
||||
|
||||
#### [v4.8.10](https://github.com/rive-app/rive-react/compare/v4.8.9...v4.8.10)
|
||||
|
||||
> 23 April 2024
|
||||
|
||||
- chore: release 4.8.10 [`af3edad`](https://github.com/rive-app/rive-react/commit/af3edad2c20e820569544318bd68bb3c56b9e180)
|
||||
- bump rive library dependencies to 2.14.4 [`5326f80`](https://github.com/rive-app/rive-react/commit/5326f800f7a99eafa9c2081e22966509f89008da)
|
||||
|
||||
#### [v4.8.9](https://github.com/rive-app/rive-react/compare/v4.8.8...v4.8.9)
|
||||
|
||||
> 18 April 2024
|
||||
|
||||
- chore: release 4.8.9 [`b44f9ad`](https://github.com/rive-app/rive-react/commit/b44f9ad9e157702af5b5a946c8a476f4842392ce)
|
||||
- Bump rive js libraries to 2.14.3 [`b249530`](https://github.com/rive-app/rive-react/commit/b2495300b7a7badcdfb6ced96c2eabb8779c36f0)
|
||||
|
||||
#### [v4.8.8](https://github.com/rive-app/rive-react/compare/v4.8.7...v4.8.8)
|
||||
|
||||
> 17 April 2024
|
||||
|
||||
- chore: release 4.8.8 [`eb43626`](https://github.com/rive-app/rive-react/commit/eb436263d786ffdee20d39dea0ce16b8aec101a9)
|
||||
- bump canvas and webgl to 2.14.2 [`0e63852`](https://github.com/rive-app/rive-react/commit/0e6385288ec85c40c5e7f4bc6f15b98a02ec6b88)
|
||||
|
||||
#### [v4.8.7](https://github.com/rive-app/rive-react/compare/v4.8.6...v4.8.7)
|
||||
|
||||
> 11 April 2024
|
||||
|
||||
- chore: release 4.8.7 [`78f7543`](https://github.com/rive-app/rive-react/commit/78f75434fc179326918f6e837058a74fa4a8dbd6)
|
||||
- bump react canvas to 2.14.1 [`a9c2950`](https://github.com/rive-app/rive-react/commit/a9c29504191d929b7e96587100d375ba6787deb2)
|
||||
|
||||
#### [v4.8.6](https://github.com/rive-app/rive-react/compare/v4.8.5...v4.8.6)
|
||||
|
||||
> 9 April 2024
|
||||
|
||||
- chore: release 4.8.6 [`e799f64`](https://github.com/rive-app/rive-react/commit/e799f64554e05de8c3b0666aa7091859576d37ba)
|
||||
- Bump rive-canvas to 2.13.2 [`95a1daa`](https://github.com/rive-app/rive-react/commit/95a1daa4efbb3835e886317ad16161fe8ac843a5)
|
||||
|
||||
#### [v4.8.5](https://github.com/rive-app/rive-react/compare/v4.8.4...v4.8.5)
|
||||
|
||||
> 8 April 2024
|
||||
|
||||
- chore: release 4.8.5 [`8a5b88c`](https://github.com/rive-app/rive-react/commit/8a5b88c59132e5d04fdcce1db903397fd15b5a18)
|
||||
- bump version to 2.13.0 [`d3b29cf`](https://github.com/rive-app/rive-react/commit/d3b29cf7d7c6fe99e4e12f4579ef0876ef875b35)
|
||||
|
||||
#### [v4.8.4](https://github.com/rive-app/rive-react/compare/v4.8.3...v4.8.4)
|
||||
|
||||
> 29 March 2024
|
||||
|
||||
- feat: add new webgl2 package for new Rive Renderer [`a7875b2`](https://github.com/rive-app/rive-react/commit/a7875b26a43342f6380a5009b25b831acfcfb610)
|
||||
- chore: release 4.8.4 [`611522b`](https://github.com/rive-app/rive-react/commit/611522b3e06c30923b4aefa737310c376dab861c)
|
||||
- Update README.md [`4653b8b`](https://github.com/rive-app/rive-react/commit/4653b8bea1169408c94962e80fe3f2c34c8b221f)
|
||||
|
||||
#### [v4.8.3](https://github.com/rive-app/rive-react/compare/v4.8.2...v4.8.3)
|
||||
|
||||
> 26 February 2024
|
||||
|
||||
- chore: release 4.8.3 [`0d0688f`](https://github.com/rive-app/rive-react/commit/0d0688feb6a7f5dedacbfd15a16bc4cb30e97a04)
|
||||
- chore: bump rive-wasm to 2.10.3 for text bug fixes [`7a97c14`](https://github.com/rive-app/rive-react/commit/7a97c14c93422cb0d133fd2533c08af7eb81ba95)
|
||||
|
||||
#### [v4.8.2](https://github.com/rive-app/rive-react/compare/v4.8.1...v4.8.2)
|
||||
|
||||
> 21 February 2024
|
||||
|
||||
- chore: release 4.8.2 [`cff7875`](https://github.com/rive-app/rive-react/commit/cff787524ddd8b9286e5322b97be2c236834d854)
|
||||
- chore: bump rive-wasm to 2.10.2 for various dependency fixes [`a34a588`](https://github.com/rive-app/rive-react/commit/a34a588ee5c47e9c16f4d66d44446a311863d5e6)
|
||||
|
||||
#### [v4.8.1](https://github.com/rive-app/rive-react/compare/v4.8.0...v4.8.1)
|
||||
|
||||
> 9 February 2024
|
||||
|
||||
- chore: release 4.8.1 [`aa89f2a`](https://github.com/rive-app/rive-react/commit/aa89f2a1baf9da73f71ed74616cd87059b32df74)
|
||||
- chore: bump rive-wasm to 2.10.1 for text fix at c++ level [`39d275b`](https://github.com/rive-app/rive-react/commit/39d275b3e0ca0cd0b2f296370094fd39efe1662a)
|
||||
|
||||
#### [v4.8.0](https://github.com/rive-app/rive-react/compare/v4.7.1...v4.8.0)
|
||||
|
||||
> 6 February 2024
|
||||
|
||||
- chore: release 4.8.0 [`e22acf9`](https://github.com/rive-app/rive-react/commit/e22acf98ba2b2464b3a6b6f73f518a42852a2d0e)
|
||||
- chore: bump rive-wasm dependency to 2.10.0 [`2e52e35`](https://github.com/rive-app/rive-react/commit/2e52e35ddcdb6c169fcedaf792baa3eeab52b1c7)
|
||||
|
||||
#### [v4.7.1](https://github.com/rive-app/rive-react/compare/v4.7.0...v4.7.1)
|
||||
|
||||
> 9 January 2024
|
||||
|
||||
- feat: add customDevicePixelRatio param from WASM for adjusting canvas size based on dpr [`c2319b8`](https://github.com/rive-app/rive-react/commit/c2319b8dea562320966d09f54e0057a643ed7e92)
|
||||
- chore: release 4.7.1 [`f67cb24`](https://github.com/rive-app/rive-react/commit/f67cb244d2d1ebd9cf4645ca94c45875a623209c)
|
||||
|
||||
#### [v4.7.0](https://github.com/rive-app/rive-react/compare/v4.6.2...v4.7.0)
|
||||
|
||||
> 21 December 2023
|
||||
|
||||
- chore: release 4.7.0 [`877e43e`](https://github.com/rive-app/rive-react/commit/877e43e354b11cfa1f774515f9d00f1c013ef2ac)
|
||||
- chore: bump rive-wasm to 2.9.0 for iOS check when creating offscreen webgl in c2d renderer [`6a033a9`](https://github.com/rive-app/rive-react/commit/6a033a99d30b85fdd6b82aada28036d3a6112054)
|
||||
|
||||
#### [v4.6.2](https://github.com/rive-app/rive-react/compare/v4.6.1...v4.6.2)
|
||||
|
||||
> 15 December 2023
|
||||
|
||||
- chore: release 4.6.2 [`88f7558`](https://github.com/rive-app/rive-react/commit/88f7558ddf9172bd90bfdeb8ecc138ec81b1ca25)
|
||||
- chore: bump rive-wasm to 2.8.3 to reintroduce cleaning up of image textures [`cfe3a29`](https://github.com/rive-app/rive-react/commit/cfe3a298fba9157ecf27ccac775ae13cb3e3953b)
|
||||
|
||||
#### [v4.6.1](https://github.com/rive-app/rive-react/compare/v4.6.0...v4.6.1)
|
||||
|
||||
> 15 December 2023
|
||||
|
||||
- chore: release 4.6.1 [`8e24185`](https://github.com/rive-app/rive-react/commit/8e24185f3ff7670eaa5aa93778cb53010936e6eb)
|
||||
- chore: bump rive-wasm to 2.8.2 for additional proxy gl checks before rendering an image/mesh [`5fad06d`](https://github.com/rive-app/rive-react/commit/5fad06d4bdf377a03a5f276a77b2c1037ae84474)
|
||||
|
||||
#### [v4.6.0](https://github.com/rive-app/rive-react/compare/v4.5.8...v4.6.0)
|
||||
|
||||
> 15 December 2023
|
||||
|
||||
- chore: release 4.6.0 [`df14bc3`](https://github.com/rive-app/rive-react/commit/df14bc383b2a6feb08ffdd4e5557f65bbd1430ba)
|
||||
- chore: bump rive-wasm to 2.8.0 for GL as a proxy solution to checking lost context [`1196dd4`](https://github.com/rive-app/rive-react/commit/1196dd4c4e21cc9a012616fa04c02a36791336cf)
|
||||
- add webgl to 2.8.0 too [`b8dc1e5`](https://github.com/rive-app/rive-react/commit/b8dc1e53712821bf9896564e7a7c1bf562107a90)
|
||||
|
||||
#### [v4.5.8](https://github.com/rive-app/rive-react/compare/v4.5.7...v4.5.8)
|
||||
|
||||
> 15 December 2023
|
||||
|
||||
- chore: release 4.5.8 [`06ceb3c`](https://github.com/rive-app/rive-react/commit/06ceb3cdb0ba497b3dda75474268c6920c99b2a9)
|
||||
- revert wasm build to 2.7.7 for testing intermediate changes before 2.7.8 [`acaa12f`](https://github.com/rive-app/rive-react/commit/acaa12f7fc7ffb6fa0ea67e0d9fe6b3680ac64f7)
|
||||
|
||||
#### [v4.5.7](https://github.com/rive-app/rive-react/compare/v4.5.6...v4.5.7)
|
||||
|
||||
> 14 December 2023
|
||||
|
||||
- chore: release 4.5.7 [`0acf384`](https://github.com/rive-app/rive-react/commit/0acf384570fee3cf32e42dfe41bee0da21a252b8)
|
||||
- chore: bump rive-wasm to 2.7.8 for texture deletion check [`97a29ac`](https://github.com/rive-app/rive-react/commit/97a29acfdc25eca767a0402095708b110b496dc3)
|
||||
|
||||
#### [v4.5.6](https://github.com/rive-app/rive-react/compare/v4.5.5...v4.5.6)
|
||||
|
||||
> 30 November 2023
|
||||
|
||||
- chore: release 4.5.6 [`5eb5ccf`](https://github.com/rive-app/rive-react/commit/5eb5ccfdaa2fe1e3277dbeff4fd8781b160c1ded)
|
||||
- bump rive-wasm to 2.7.6 [`edcc2c1`](https://github.com/rive-app/rive-react/commit/edcc2c1320027cc116dfa2cd1fc821b630be4403)
|
||||
|
||||
#### [v4.5.5](https://github.com/rive-app/rive-react/compare/v4.5.4...v4.5.5)
|
||||
|
||||
> 29 November 2023
|
||||
|
||||
- chore: release 4.5.5 [`68d8ca4`](https://github.com/rive-app/rive-react/commit/68d8ca44fa61c94d6a5bb04a268015c71f7013d5)
|
||||
- patch: bump wasm to 2.7.5 [`ee9b83d`](https://github.com/rive-app/rive-react/commit/ee9b83d7643fc41ab422e29203d5e241a2a22d98)
|
||||
|
||||
#### [v4.5.4](https://github.com/rive-app/rive-react/compare/v4.5.3...v4.5.4)
|
||||
|
||||
> 21 November 2023
|
||||
|
||||
- chore: release 4.5.4 [`187066c`](https://github.com/rive-app/rive-react/commit/187066c2cbc6240dd8cf46ea9b58ba69d98017c4)
|
||||
- chore: bump rive-wasm to 2.7.4 for bone fixes [`427d74d`](https://github.com/rive-app/rive-react/commit/427d74d14f69f557609c891f3803955c1ffcad12)
|
||||
|
||||
#### [v4.5.3](https://github.com/rive-app/rive-react/compare/v4.5.2...v4.5.3)
|
||||
|
||||
> 9 November 2023
|
||||
|
||||
- chore: release 4.5.3 [`0613774`](https://github.com/rive-app/rive-react/commit/061377432e23e263404ba773ae5aca593edc696a)
|
||||
- patch: bump rive-wasm to 2.7.3 [`53d7548`](https://github.com/rive-app/rive-react/commit/53d7548b15bb445f1c34ff599597ec139e80b0d6)
|
||||
|
||||
#### [v4.5.2](https://github.com/rive-app/rive-react/compare/v4.5.1...v4.5.2)
|
||||
|
||||
> 8 November 2023
|
||||
|
||||
- Add a react-canvas-lite package to build setup [`75dac6f`](https://github.com/rive-app/rive-react/commit/75dac6fe64b4904d22d986299da4c1d8a9941622)
|
||||
- chore: release 4.5.2 [`e1a4ca0`](https://github.com/rive-app/rive-react/commit/e1a4ca005828bf1750d8e6359e29ae635355bb1a)
|
||||
- Tweak copy [`83ebd67`](https://github.com/rive-app/rive-react/commit/83ebd6776da2bcaaea9c98c946f8e941575c9097)
|
||||
|
||||
#### [v4.5.1](https://github.com/rive-app/rive-react/compare/v4.5.0...v4.5.1)
|
||||
|
||||
> 8 November 2023
|
||||
|
||||
- chore: release 4.5.1 [`e13c023`](https://github.com/rive-app/rive-react/commit/e13c023933b85ff0439dfbd467c39b3054699361)
|
||||
- Bump WASM dependency to 2.7.2 for nested input patch [`95183ff`](https://github.com/rive-app/rive-react/commit/95183ff8d58ed20b80979233e423663a8a66ae5e)
|
||||
|
||||
#### [v4.5.0](https://github.com/rive-app/rive-react/compare/v4.4.0...v4.5.0)
|
||||
|
||||
> 26 October 2023
|
||||
|
||||
- chore: release 4.5.0 [`64416e0`](https://github.com/rive-app/rive-react/commit/64416e0b4dc8bbe82fdcd605f8ee1e705c75318d)
|
||||
- chore: bump react to 4.5.0 [`1c6837b`](https://github.com/rive-app/rive-react/commit/1c6837bf92a88eae3f80c71db67de1c19d8840e9)
|
||||
|
||||
#### [v4.4.0](https://github.com/rive-app/rive-react/compare/v4.3.4...v4.4.0)
|
||||
|
||||
> 6 October 2023
|
||||
|
||||
- chore: release 4.4.0 [`15330ab`](https://github.com/rive-app/rive-react/commit/15330ababeaf49897e79fff2c731ee05612cb40e)
|
||||
- bump rive-app versions to 2.5.0 [`af70b81`](https://github.com/rive-app/rive-react/commit/af70b8150dc84cbcfeece2a018084a3d30c0288e)
|
||||
|
||||
#### [v4.3.4](https://github.com/rive-app/rive-react/compare/v4.3.3...v4.3.4)
|
||||
|
||||
> 3 October 2023
|
||||
|
||||
- chore: release 4.3.4 [`a984e00`](https://github.com/rive-app/rive-react/commit/a984e007f480c1b236888a20f7d6d467eecd1dcf)
|
||||
- patch: bump rive-wasm to 2.4.4 [`04d8e01`](https://github.com/rive-app/rive-react/commit/04d8e01f87f20dc084b3de88c1e66d32cdbadeed)
|
||||
|
||||
#### [v4.3.3](https://github.com/rive-app/rive-react/compare/v4.3.2...v4.3.3)
|
||||
|
||||
> 20 September 2023
|
||||
|
||||
- chore: release 4.3.3 [`44e46c5`](https://github.com/rive-app/rive-react/commit/44e46c5dee31df2f0035f00a58955d3b3a83e223)
|
||||
- chore: bump wasm to 2.4.3 for url sanitization [`323e92e`](https://github.com/rive-app/rive-react/commit/323e92e6361aa68b9a749e8466679760cc4a41a1)
|
||||
|
||||
#### [v4.3.2](https://github.com/rive-app/rive-react/compare/v4.3.1...v4.3.2)
|
||||
|
||||
> 19 September 2023
|
||||
|
||||
- chore: release 4.3.2 [`a07fa02`](https://github.com/rive-app/rive-react/commit/a07fa02ed6cebe2661ccee8bd37fdcef18acc981)
|
||||
- chore: bump rive-wasm to 2.4.2 [`d710e1e`](https://github.com/rive-app/rive-react/commit/d710e1e4b24ad2eda66277eb748bdac7e9e48302)
|
||||
|
||||
#### [v4.3.1](https://github.com/rive-app/rive-react/compare/v4.3.0...v4.3.1)
|
||||
|
||||
> 18 September 2023
|
||||
|
||||
- chore: release 4.3.1 [`d35e9b2`](https://github.com/rive-app/rive-react/commit/d35e9b28051ad28528142dbde1f4c5bd7a9814ab)
|
||||
- chore: bump rive-wasm to 2.4.1 for event updates [`cf44463`](https://github.com/rive-app/rive-react/commit/cf44463805e8117ee6f1ac5025b973f35f307b1c)
|
||||
|
||||
#### [v4.3.0](https://github.com/rive-app/rive-react/compare/v4.2.1...v4.3.0)
|
||||
|
||||
10
README.md
10
README.md
@@ -5,7 +5,7 @@
|
||||
|
||||
# Rive React
|
||||
|
||||

|
||||

|
||||
|
||||
A React runtime library for [Rive](https://rive.app).
|
||||
|
||||
@@ -21,7 +21,7 @@ This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-a
|
||||
- 👨💻 [Contributing](#contributing)
|
||||
- :question: [Issues](#issues)
|
||||
|
||||
## Rive Overview
|
||||
## Rive overview
|
||||
|
||||
[Rive](https://rive.app) is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.
|
||||
|
||||
@@ -31,7 +31,7 @@ This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-a
|
||||
|
||||
🛠 [Resources for building in Rive](https://rive.app/resources/)
|
||||
|
||||
## Getting Started
|
||||
## Getting started
|
||||
|
||||
Follow along with the link below for a quick start in getting Rive React integrated into your React apps.
|
||||
|
||||
@@ -39,7 +39,7 @@ Follow along with the link below for a quick start in getting Rive React integra
|
||||
|
||||
[API documentation](https://help.rive.app/runtimes/overview/react/parameters-and-return-values)
|
||||
|
||||
## Supported Versions
|
||||
## Supported versions
|
||||
|
||||
This library supports React versions `^16.8.0` through `^18.0.0`.
|
||||
|
||||
@@ -56,7 +56,7 @@ Check out our Storybook instance that shows how to use the library in small exam
|
||||
|
||||
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.
|
||||
|
||||
## Migration Guides
|
||||
## Migration guides
|
||||
|
||||
Using an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through version bumps; breaking changes and all!
|
||||
|
||||
|
||||
@@ -165,6 +165,30 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Rive Text
|
||||
|
||||
A simple example showing Rive Text rendering. Note that if you are using the `@rive-app/react-canvas-lite` package,
|
||||
the Rive Text bit will not render on the graphic, however, the rest of the Rive content should without issue.
|
||||
|
||||
<Canvas withSource="open">
|
||||
<Story name="Rive Text">
|
||||
{() => {
|
||||
const STATE_MACHINE_NAME = 'State Machine 1';
|
||||
const { rive, RiveComponent } = useRive({
|
||||
src: 'text_test.riv',
|
||||
stateMachines: STATE_MACHINE_NAME,
|
||||
autoplay: true,
|
||||
automaticallyHandleEvents: true,
|
||||
});
|
||||
return (
|
||||
<div className="center">
|
||||
<RiveComponent className="base-canvas-size" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Rive Events
|
||||
|
||||
To listen for Rive Events reported during state machine play, use the `on` API to add an event listener.
|
||||
|
||||
BIN
examples/stories/assets/text_test.riv
Normal file
BIN
examples/stories/assets/text_test.riv
Normal file
Binary file not shown.
9
npm/react-canvas-lite/README.md
Normal file
9
npm/react-canvas-lite/README.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# @rive-app/react-canvas-lite
|
||||
|
||||
Output for `rive-react` using the backing `@rive-app/canvas-lite` JS runtime.
|
||||
|
||||
## Why Lite?
|
||||
|
||||
The current `@rive-app/react-canvas` dependency supports all Rive features and contains the necessary backing dependencies to render those graphics. This `lite` version has the same API, but does not compile and build with certain dependencies in order to keep the package size as small as possible.
|
||||
|
||||
At this time, this lite version of `@rive-app/react-canvas-lite` will not render [Rive Text](https://help.rive.app/editor/text) onto the canvas. Note however, that even if your Rive file may include Rive Text components when using this package, the canvas will still render the graphic without the Rive Text components.
|
||||
26
npm/react-canvas-lite/package.json
Normal file
26
npm/react-canvas-lite/package.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "@rive-app/react-canvas-lite",
|
||||
"version": "4.9.2",
|
||||
"description": "React wrapper around the @rive-app/canvas-lite library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
"files": [
|
||||
"dist/**"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rive-app/rive-react.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rive-app/rive-react/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {
|
||||
"@rive-app/canvas-lite": "2.15.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rive-app/react-canvas",
|
||||
"version": "4.3.1",
|
||||
"version": "4.9.2",
|
||||
"description": "React wrapper around the @rive-app/canvas library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
@@ -18,7 +18,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {
|
||||
"@rive-app/canvas": "2.4.1"
|
||||
"@rive-app/canvas": "2.15.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rive-app/react-webgl",
|
||||
"version": "4.3.1",
|
||||
"version": "4.9.2",
|
||||
"description": "React wrapper around the @rive-app/webgl library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
@@ -18,7 +18,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {
|
||||
"@rive-app/webgl": "2.4.1"
|
||||
"@rive-app/webgl": "2.15.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
|
||||
0
npm/react-webgl2/README.md
Normal file
0
npm/react-webgl2/README.md
Normal file
24
npm/react-webgl2/package.json
Normal file
24
npm/react-webgl2/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "@rive-app/react-webgl2",
|
||||
"version": "4.9.2",
|
||||
"description": "React wrapper around the @rive-app/webgl2 library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
"files": [
|
||||
"dist/**"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rive-app/rive-react.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rive-app/rive-react/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rive-react",
|
||||
"version": "4.3.1",
|
||||
"version": "4.9.2",
|
||||
"description": "React wrapper around the rive-js library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
@@ -36,8 +36,9 @@
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {
|
||||
"@rive-app/canvas": "2.4.1",
|
||||
"@rive-app/webgl": "2.4.1"
|
||||
"@rive-app/canvas": "2.15.2",
|
||||
"@rive-app/canvas-lite": "2.15.2",
|
||||
"@rive-app/webgl": "2.15.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
|
||||
@@ -5,6 +5,8 @@ set -e
|
||||
# Copy the build to each react-variant build for npm release
|
||||
cp -r ./dist ./npm/react-webgl
|
||||
cp -r ./dist ./npm/react-canvas
|
||||
cp -r ./dist ./npm/react-canvas-lite
|
||||
cp -r ./dist ./npm/react-webgl2
|
||||
|
||||
echo "Replacing the canvas with webgl references in react-webgl"
|
||||
pushd ./npm/react-webgl/dist
|
||||
@@ -16,3 +18,25 @@ else
|
||||
find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
|
||||
fi
|
||||
popd
|
||||
|
||||
echo "Replacing the canvas with webgl2 references in react-webgl2"
|
||||
pushd ./npm/react-webgl2/dist
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
|
||||
find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
|
||||
else
|
||||
find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
|
||||
find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
|
||||
fi
|
||||
popd
|
||||
|
||||
echo "Replacing the canvas with canvas-lite references in react-canvas-lite"
|
||||
pushd ./npm/react-canvas-lite/dist
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
|
||||
find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
|
||||
else
|
||||
find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
|
||||
find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
|
||||
fi
|
||||
popd
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
const fs = require('fs');
|
||||
const path = process.argv[2];
|
||||
const npmPackageSplit = process.argv[3].split('-');
|
||||
const renderer = npmPackageSplit[npmPackageSplit.length - 1];
|
||||
// extracts "webgl" or "canvas-lite" from the npm package name
|
||||
const renderer = npmPackageSplit.slice(1).join('-');
|
||||
const package = require(path + '/package.json');
|
||||
|
||||
function trimNpmPackage() {
|
||||
|
||||
@@ -7,10 +7,12 @@ import { useEffect, useState } from 'react';
|
||||
*
|
||||
* Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
|
||||
*
|
||||
* @param customDevicePixelRatio - Number to force a dpr to abide by, rather than using the window's
|
||||
*
|
||||
* @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
|
||||
*/
|
||||
export default function useDevicePixelRatio() {
|
||||
const dpr = getDevicePixelRatio();
|
||||
export default function useDevicePixelRatio(customDevicePixelRatio?: number) {
|
||||
const dpr = customDevicePixelRatio || getDevicePixelRatio();
|
||||
const [currentDpr, setCurrentDpr] = useState(dpr);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -20,7 +22,7 @@ export default function useDevicePixelRatio() {
|
||||
}
|
||||
|
||||
const updateDpr = () => {
|
||||
const newDpr = getDevicePixelRatio();
|
||||
const newDpr = customDevicePixelRatio || getDevicePixelRatio();
|
||||
setCurrentDpr(newDpr);
|
||||
};
|
||||
const mediaMatcher = window.matchMedia(
|
||||
@@ -35,7 +37,7 @@ export default function useDevicePixelRatio() {
|
||||
? mediaMatcher.removeEventListener('change', updateDpr)
|
||||
: mediaMatcher.removeListener(updateDpr);
|
||||
};
|
||||
}, [currentDpr]);
|
||||
}, [currentDpr, customDevicePixelRatio]);
|
||||
|
||||
return currentDpr;
|
||||
}
|
||||
|
||||
@@ -83,13 +83,14 @@ export default function useResizeCanvas({
|
||||
fitCanvasToArtboardHeight,
|
||||
shouldResizeCanvasToContainer,
|
||||
useDevicePixelRatio: shouldUseDevicePixelRatio,
|
||||
customDevicePixelRatio,
|
||||
} = presetOptions;
|
||||
|
||||
const containerSize = useContainerSize(
|
||||
containerRef,
|
||||
shouldResizeCanvasToContainer
|
||||
);
|
||||
const currentDevicePixelRatio = useDevicePixelRatio();
|
||||
const currentDevicePixelRatio = useDevicePixelRatio(customDevicePixelRatio);
|
||||
|
||||
const { maxX, maxY } = artboardBounds ?? {};
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
|
||||
|
||||
export type UseRiveOptions = {
|
||||
useDevicePixelRatio: boolean;
|
||||
customDevicePixelRatio: number;
|
||||
fitCanvasToArtboardHeight: boolean;
|
||||
useOffscreenRenderer: boolean;
|
||||
shouldResizeCanvasToContainer: boolean;
|
||||
|
||||
@@ -133,7 +133,7 @@ describe('useRive', () => {
|
||||
expect(cleanupMock).toBeCalled();
|
||||
});
|
||||
|
||||
it('sets the a bounds with the devicePixelRatio by default', async () => {
|
||||
it('sets the bounds with the devicePixelRatio by default', async () => {
|
||||
const params = {
|
||||
src: 'file-src',
|
||||
};
|
||||
@@ -166,6 +166,41 @@ describe('useRive', () => {
|
||||
expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
|
||||
});
|
||||
|
||||
it('sets the bounds with a specified customDevicePixelRatio if one is set', async () => {
|
||||
const params = {
|
||||
src: 'file-src',
|
||||
};
|
||||
|
||||
global.devicePixelRatio = 2;
|
||||
|
||||
// @ts-ignore
|
||||
mocked(rive.Rive).mockImplementation(() => baseRiveMock);
|
||||
|
||||
const canvasSpy = document.createElement('canvas');
|
||||
const containerSpy = document.createElement('div');
|
||||
jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
|
||||
jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
|
||||
|
||||
const { result } = renderHook(() =>
|
||||
useRive(params, { customDevicePixelRatio: 1 })
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
result.current.setCanvasRef(canvasSpy);
|
||||
result.current.setContainerRef(containerSpy);
|
||||
controlledRiveloadCb();
|
||||
});
|
||||
|
||||
// Height and width should be 2* the width and height returned from containers
|
||||
// bounding rect
|
||||
expect(canvasSpy).toHaveAttribute('height', '100');
|
||||
expect(canvasSpy).toHaveAttribute('width', '100');
|
||||
|
||||
// Style height and width should be the same as returned from containers
|
||||
// bounding rect
|
||||
expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
|
||||
});
|
||||
|
||||
it('sets the a bounds without the devicePixelRatio if useDevicePixelRatio is false', async () => {
|
||||
const params = {
|
||||
src: 'file-src',
|
||||
|
||||
Reference in New Issue
Block a user