mirror of
https://github.com/rive-app/rive-react.git
synced 2026-03-13 08:22:30 +08:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
44e46c5dee | ||
|
|
323e92e636 | ||
|
|
a07fa02ed6 | ||
|
|
d710e1e4b2 | ||
|
|
d35e9b2805 | ||
|
|
cf44463805 | ||
|
|
f59f44692a | ||
|
|
6ba68fab9e |
28
CHANGELOG.md
28
CHANGELOG.md
@@ -4,8 +4,36 @@ All notable changes to this project will be documented in this file. Dates are d
|
||||
|
||||
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
||||
|
||||
#### [v4.3.3](https://github.com/rive-app/rive-react/compare/v4.3.2...v4.3.3)
|
||||
|
||||
- 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)
|
||||
|
||||
> 13 September 2023
|
||||
|
||||
- feature: Bump WASM dependency to support Rive Events [`6ba68fa`](https://github.com/rive-app/rive-react/commit/6ba68fab9e5482a3ab2a92410ebb1b422db9ff9e)
|
||||
- chore: release 4.3.0 [`f59f446`](https://github.com/rive-app/rive-react/commit/f59f44692a9ca62c9c3f98447087647b125ada5d)
|
||||
|
||||
#### [v4.2.1](https://github.com/rive-app/rive-react/compare/v4.2.0...v4.2.1)
|
||||
|
||||
> 7 September 2023
|
||||
|
||||
- chore: release 4.2.1 [`982addf`](https://github.com/rive-app/rive-react/commit/982addf163ad73a8b077c7a1a27d50bdae402260)
|
||||
- chore: bump rive-wasm to 2.3.1 for mesh fix [`dfd89c7`](https://github.com/rive-app/rive-react/commit/dfd89c769193541192718a68a8035e05caa57f07)
|
||||
|
||||
#### [v4.2.0](https://github.com/rive-app/rive-react/compare/v4.1.6...v4.2.0)
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<!-- RiveTestHook.stories.mdx -->
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import RiveComponent, { useRive, useStateMachineInput } from '../../src';
|
||||
import RiveComponent, {
|
||||
EventType,
|
||||
useRive,
|
||||
useStateMachineInput,
|
||||
} from '../../src';
|
||||
import { Button } from './components/Button';
|
||||
import './rive-overview.css';
|
||||
|
||||
@@ -160,3 +164,35 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Rive Events
|
||||
|
||||
To listen for Rive Events reported during state machine play, use the `on` API to add an event listener.
|
||||
|
||||
<Canvas withSource="open">
|
||||
<Story name="Rive Events">
|
||||
{() => {
|
||||
const STATE_MACHINE_NAME = 'State Machine 1';
|
||||
const { rive, RiveComponent } = useRive({
|
||||
src: 'rating_animation.riv',
|
||||
stateMachines: STATE_MACHINE_NAME,
|
||||
autoplay: true,
|
||||
automaticallyHandleEvents: true,
|
||||
});
|
||||
useEffect(() => {
|
||||
if (rive) {
|
||||
rive.on(EventType.RiveEvent, onRiveEventReceived);
|
||||
}
|
||||
}, [rive]);
|
||||
const onRiveEventReceived = (riveEvent) => {
|
||||
console.log('Rive Event Fired', riveEvent);
|
||||
};
|
||||
return (
|
||||
<div className="center">
|
||||
<RiveComponent className="base-canvas-size" />
|
||||
<p>Click on the 5 star!</p>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
BIN
examples/stories/assets/rating_animation.riv
Normal file
BIN
examples/stories/assets/rating_animation.riv
Normal file
Binary file not shown.
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rive-app/react-canvas",
|
||||
"version": "4.2.1",
|
||||
"version": "4.3.3",
|
||||
"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.3.1"
|
||||
"@rive-app/canvas": "2.4.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rive-app/react-webgl",
|
||||
"version": "4.2.1",
|
||||
"version": "4.3.3",
|
||||
"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.3.1"
|
||||
"@rive-app/webgl": "2.4.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rive-react",
|
||||
"version": "4.2.1",
|
||||
"version": "4.3.3",
|
||||
"description": "React wrapper around the rive-js library",
|
||||
"main": "dist/index.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
@@ -36,8 +36,8 @@
|
||||
},
|
||||
"homepage": "https://github.com/rive-app/rive-react#readme",
|
||||
"dependencies": {
|
||||
"@rive-app/canvas": "2.3.1",
|
||||
"@rive-app/webgl": "2.3.1"
|
||||
"@rive-app/canvas": "2.4.3",
|
||||
"@rive-app/webgl": "2.4.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
|
||||
@@ -36,6 +36,18 @@ export interface RiveProps {
|
||||
* Specify whether to resize the canvas to its container automatically
|
||||
*/
|
||||
shouldResizeCanvasToContainer?: boolean;
|
||||
/**
|
||||
* Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
|
||||
* functionality that can be invoked implicitly when detected.
|
||||
*
|
||||
* For example, if during the render loop an OpenUrlEvent is detected, the
|
||||
* browser may try to open the specified URL in the payload.
|
||||
*
|
||||
* This flag is false by default to prevent any unwanted behaviors from taking place.
|
||||
* This means any special Rive Event will have to be handled manually by subscribing to
|
||||
* EventType.RiveEvent
|
||||
*/
|
||||
automaticallyHandleEvents?: boolean;
|
||||
}
|
||||
|
||||
const Rive = ({
|
||||
@@ -47,6 +59,7 @@ const Rive = ({
|
||||
useOffscreenRenderer = true,
|
||||
shouldDisableRiveListeners = false,
|
||||
shouldResizeCanvasToContainer = true,
|
||||
automaticallyHandleEvents = false,
|
||||
children,
|
||||
...rest
|
||||
}: RiveProps & ComponentProps<'canvas'>) => {
|
||||
@@ -58,6 +71,7 @@ const Rive = ({
|
||||
stateMachines,
|
||||
autoplay: true,
|
||||
shouldDisableRiveListeners,
|
||||
automaticallyHandleEvents,
|
||||
};
|
||||
|
||||
const options = {
|
||||
|
||||
Reference in New Issue
Block a user