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).
|
||||
|
||||
#### [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)
|
||||
|
||||
#### [v3.0.31](https://github.com/rive-app/rive-react/compare/v3.0.30...v3.0.31)
|
||||
|
||||
> 21 October 2022
|
||||
|
||||
- chore: release 3.0.31 [`33053b3`](https://github.com/rive-app/rive-react/commit/33053b3b7f0ff6d99ce4383ecea1f031ccb587e0)
|
||||
- bump runtimes to incorporate speed fix for state machines [`4040083`](https://github.com/rive-app/rive-react/commit/4040083d5a89510356e45433e5026664baf92a49)
|
||||
|
||||
#### [v3.0.30](https://github.com/rive-app/rive-react/compare/v3.0.29...v3.0.30)
|
||||
|
||||
> 20 October 2022
|
||||
|
||||
- chore: release 3.0.30 [`2153b81`](https://github.com/rive-app/rive-react/commit/2153b81e6b74d33d1e2f709291fad338dcbb85da)
|
||||
- Bump dependencies to fix call to runtime cleanup [`6b1500e`](https://github.com/rive-app/rive-react/commit/6b1500e681ba8984d786eec4d414c4c8ad4b0268)
|
||||
|
||||
#### [v3.0.29](https://github.com/rive-app/rive-react/compare/v3.0.28...v3.0.29)
|
||||
|
||||
> 20 October 2022
|
||||
|
||||
- chore: release 3.0.29 [`503702c`](https://github.com/rive-app/rive-react/commit/503702cf1f963204e3519b9b3dbfea1bfa271d0a)
|
||||
- Call cleanup on unmount [`7be20b0`](https://github.com/rive-app/rive-react/commit/7be20b0a874afab7f6a29122521f42c71a22aa51)
|
||||
|
||||
#### [v3.0.28](https://github.com/rive-app/rive-react/compare/v3.0.27...v3.0.28)
|
||||
|
||||
> 20 October 2022
|
||||
|
||||
@@ -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)
|
||||
- [Login screen w/ input tracking](https://rive-app.github.io/rive-use-cases/?path=/story/example-loginformcomponent--primary)
|
||||
- [Mouse tracking](https://codesandbox.io/s/rive-mouse-track-test-t0y965?file=/src/App.js)
|
||||
- [Accessibility concerns](https://blog.rive.app/accessible-web-animations-aria-live-regions/)
|
||||
- [Accessibility concerns](https://rive.app/blog/accesible-web-animations-aria-live-regions)
|
||||
|
||||
## Migration Guides
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ import { useState } from 'react';
|
||||
|
||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import RiveComponent, {useRive, useStateMachineInput} from '../../src';
|
||||
import {Button} from './components/Button';
|
||||
import RiveComponent, { useRive, useStateMachineInput } from '../../src';
|
||||
import { Button } from './components/Button';
|
||||
import './rive-overview.css';
|
||||
|
||||
<Meta title="React Runtime/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!
|
||||
|
||||
The `useStateMachineInput` hook is a helper that makes grabbing references to state machine inputs easier to setup. This hook should be used along with the `useRive` hook, as you need to pass in the `rive` instance returned from `useRive`. See each of the examples below to see usage of the hook creating instance of three types of inputs:
|
||||
|
||||
- Booleans
|
||||
- Numbers
|
||||
- Triggers
|
||||
@@ -90,8 +91,8 @@ Once you grab a reference to the state machine input, you can get/set the value
|
||||
<Canvas withSource="open">
|
||||
<Story name="Number input">
|
||||
{() => {
|
||||
const STATE_MACHINE_NAME = 'State Machine ';
|
||||
const INPUT_NAME = 'Level';
|
||||
const STATE_MACHINE_NAME = 'skill-controller';
|
||||
const INPUT_NAME = 'level';
|
||||
const { rive, RiveComponent: RiveComponentTouch } = useRive({
|
||||
src: 'skills.riv',
|
||||
stateMachines: STATE_MACHINE_NAME,
|
||||
@@ -101,7 +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,
|
||||
// we need to set the value to a number. For this state machine input, we need
|
||||
// to set to 0, 1 or 2 for a state transition to occur.
|
||||
const levelInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME);
|
||||
const levelInput = useStateMachineInput(
|
||||
rive,
|
||||
STATE_MACHINE_NAME,
|
||||
INPUT_NAME
|
||||
);
|
||||
return (
|
||||
// The animation will fit to the parent element, so we set a large height
|
||||
// and width for this example.
|
||||
|
||||
Binary file not shown.
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rive-react",
|
||||
"version": "3.0.32",
|
||||
"version": "3.0.37",
|
||||
"description": "React wrapper around the rive-js library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
@@ -29,8 +29,8 @@
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {
|
||||
"@rive-app/canvas": "1.0.93",
|
||||
"@rive-app/webgl": "1.0.89"
|
||||
"@rive-app/canvas": "1.0.101",
|
||||
"@rive-app/webgl": "1.0.97"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"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
|
||||
class FakeResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
observe() { }
|
||||
unobserve() { }
|
||||
disconnect() { }
|
||||
}
|
||||
|
||||
function throttle(f: Function, delay: number) {
|
||||
@@ -106,10 +106,14 @@ export function useDevicePixelRatio() {
|
||||
const mediaMatcher = window.matchMedia(
|
||||
`screen and (resolution: ${currentDpr}dppx)`
|
||||
);
|
||||
mediaMatcher.addEventListener('change', updateDpr);
|
||||
mediaMatcher.hasOwnProperty('addEventListener')
|
||||
? mediaMatcher.addEventListener('change', updateDpr)
|
||||
: mediaMatcher.addListener(updateDpr);
|
||||
|
||||
return () => {
|
||||
mediaMatcher.removeEventListener('change', updateDpr);
|
||||
mediaMatcher.hasOwnProperty('removeEventListener')
|
||||
? mediaMatcher.removeEventListener('change', updateDpr)
|
||||
: mediaMatcher.removeListener(updateDpr);
|
||||
};
|
||||
}, [currentDpr]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user