chore: release 4.3.0

CHANGELOG.md

@@ -4,8 +4,22 @@ 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.0](https://github.com/rive-app/rive-react/compare/v4.2.1...v4.3.0)
+
+- feature: Bump WASM dependency to support Rive Events [`6ba68fa`](https://github.com/rive-app/rive-react/commit/6ba68fab9e5482a3ab2a92410ebb1b422db9ff9e)
+
+#### [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 September 2023
+
+- chore: release 4.2.0 [`0247a46`](https://github.com/rive-app/rive-react/commit/0247a46c478f53499826fa40b6e03e25e833d969)
 - Updating rive wasm [`44626c7`](https://github.com/rive-app/rive-react/commit/44626c7450999abe095609b06aeafe240da8ddd5)
 
 #### [v4.1.6](https://github.com/rive-app/rive-react/compare/v4.1.5...v4.1.6)

examples/stories/StateMachineDocs.stories.mdx

@@ -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>

npm/react-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "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.0"
+    "@rive-app/canvas": "2.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

npm/react-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "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.0"
+    "@rive-app/webgl": "2.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "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.0",
-    "@rive-app/webgl": "2.3.0"
+    "@rive-app/canvas": "2.4.0",
+    "@rive-app/webgl": "2.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/components/Rive.tsx

@@ -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 = {