mirror of
https://github.com/rive-app/rive-react.git
synced 2026-03-13 08:22:30 +08:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4e2137422b | ||
|
|
0696417926 | ||
|
|
f11a433365 | ||
|
|
48a4726d1f | ||
|
|
c927f24b5a | ||
|
|
3cbbf99fec | ||
|
|
03f05f57b7 | ||
|
|
8b483b807b | ||
|
|
816fcfcdbc | ||
|
|
6c28a8795e | ||
|
|
6a57630ae6 | ||
|
|
acba24c4ed |
51
CHANGELOG.md
51
CHANGELOG.md
@@ -4,10 +4,59 @@ 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).
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
||||||
|
|
||||||
#### [v3.0.32](https://github.com/rive-app/rive-react/compare/v3.0.28...v3.0.32)
|
#### [v3.0.37](https://github.com/rive-app/rive-react/compare/v3.0.35...v3.0.37)
|
||||||
|
|
||||||
|
- maint: bump wasm dependency for more speed on state updates [`0696417`](https://github.com/rive-app/rive-react/commit/06964179262d4b79114f3609d79cc6560c30ef94)
|
||||||
|
|
||||||
|
#### [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)
|
- 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)
|
#### [v3.0.28](https://github.com/rive-app/rive-react/compare/v3.0.27...v3.0.28)
|
||||||
|
|
||||||
> 20 October 2022
|
> 20 October 2022
|
||||||
|
|||||||
@@ -50,7 +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)
|
- [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)
|
- [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)
|
- [Mouse tracking](https://codesandbox.io/s/rive-mouse-track-test-t0y965?file=/src/App.js)
|
||||||
- [Accessibility concerns](https://blog.rive.app/accessible-web-animations-aria-live-regions/)
|
- [Accessibility concerns](https://rive.app/blog/accesible-web-animations-aria-live-regions)
|
||||||
|
|
||||||
## Migration Guides
|
## Migration Guides
|
||||||
|
|
||||||
|
|||||||
@@ -4,8 +4,8 @@ import { useState } from 'react';
|
|||||||
|
|
||||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||||
|
|
||||||
import RiveComponent, {useRive, useStateMachineInput} from '../../src';
|
import RiveComponent, { useRive, useStateMachineInput } from '../../src';
|
||||||
import {Button} from './components/Button';
|
import { Button } from './components/Button';
|
||||||
import './rive-overview.css';
|
import './rive-overview.css';
|
||||||
|
|
||||||
<Meta title="React Runtime/State Machines" />
|
<Meta title="React Runtime/State Machines" />
|
||||||
@@ -15,6 +15,7 @@ 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!
|
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:
|
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
|
- Booleans
|
||||||
- Numbers
|
- Numbers
|
||||||
- Triggers
|
- Triggers
|
||||||
@@ -90,8 +91,8 @@ Once you grab a reference to the state machine input, you can get/set the value
|
|||||||
<Canvas withSource="open">
|
<Canvas withSource="open">
|
||||||
<Story name="Number input">
|
<Story name="Number input">
|
||||||
{() => {
|
{() => {
|
||||||
const STATE_MACHINE_NAME = 'State Machine ';
|
const STATE_MACHINE_NAME = 'skill-controller';
|
||||||
const INPUT_NAME = 'Level';
|
const INPUT_NAME = 'level';
|
||||||
const { rive, RiveComponent: RiveComponentTouch } = useRive({
|
const { rive, RiveComponent: RiveComponentTouch } = useRive({
|
||||||
src: 'skills.riv',
|
src: 'skills.riv',
|
||||||
stateMachines: STATE_MACHINE_NAME,
|
stateMachines: STATE_MACHINE_NAME,
|
||||||
@@ -101,7 +102,11 @@ Once you grab a reference to the state machine input, you can get/set the value
|
|||||||
// levelInput is a number state machine input. To transition the state machine,
|
// 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
|
// 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.
|
// 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 (
|
return (
|
||||||
// The animation will fit to the parent element, so we set a large height
|
// The animation will fit to the parent element, so we set a large height
|
||||||
// and width for this example.
|
// and width for this example.
|
||||||
|
|||||||
Binary file not shown.
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "rive-react",
|
"name": "rive-react",
|
||||||
"version": "3.0.32",
|
"version": "3.0.37",
|
||||||
"description": "React wrapper around the rive-js library",
|
"description": "React wrapper around the rive-js library",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"typings": "dist/types/index.d.ts",
|
"typings": "dist/types/index.d.ts",
|
||||||
@@ -29,8 +29,8 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@rive-app/canvas": "1.0.93",
|
"@rive-app/canvas": "1.0.101",
|
||||||
"@rive-app/webgl": "1.0.89"
|
"@rive-app/webgl": "1.0.97"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||||
|
|||||||
14
src/utils.ts
14
src/utils.ts
@@ -3,9 +3,9 @@ import { Dimensions } from './types';
|
|||||||
|
|
||||||
// There are polyfills for this, but they add hundreds of lines of code
|
// There are polyfills for this, but they add hundreds of lines of code
|
||||||
class FakeResizeObserver {
|
class FakeResizeObserver {
|
||||||
observe() {}
|
observe() { }
|
||||||
unobserve() {}
|
unobserve() { }
|
||||||
disconnect() {}
|
disconnect() { }
|
||||||
}
|
}
|
||||||
|
|
||||||
function throttle(f: Function, delay: number) {
|
function throttle(f: Function, delay: number) {
|
||||||
@@ -106,10 +106,14 @@ export function useDevicePixelRatio() {
|
|||||||
const mediaMatcher = window.matchMedia(
|
const mediaMatcher = window.matchMedia(
|
||||||
`screen and (resolution: ${currentDpr}dppx)`
|
`screen and (resolution: ${currentDpr}dppx)`
|
||||||
);
|
);
|
||||||
mediaMatcher.addEventListener('change', updateDpr);
|
mediaMatcher.hasOwnProperty('addEventListener')
|
||||||
|
? mediaMatcher.addEventListener('change', updateDpr)
|
||||||
|
: mediaMatcher.addListener(updateDpr);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
mediaMatcher.removeEventListener('change', updateDpr);
|
mediaMatcher.hasOwnProperty('removeEventListener')
|
||||||
|
? mediaMatcher.removeEventListener('change', updateDpr)
|
||||||
|
: mediaMatcher.removeListener(updateDpr);
|
||||||
};
|
};
|
||||||
}, [currentDpr]);
|
}, [currentDpr]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user