some improvements

CHANGELOG.md

@@ -4,6 +4,6 @@ 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).
 
-#### 0.0.19
+#### 0.0.20
 
-- Update rive-js to 0.7.29 [`ce2c706`](https://github.com/rive-app/rive-react/commit/ce2c7065f567e43cfcca4c8f98e98aaf6e92f4c3)
+- rive-0.7.30: Fix ghosting where aspect ratio of canvas is different to that of artboard [`44056eb`](https://github.com/rive-app/rive-react/commit/44056eb5654e90de6ba10ed4892a4e2a5ebf6716)

README.md

@@ -121,15 +121,19 @@ function Example() {
     autoplay: true,
   });
 
-  const onClickInput = useStateMachineInput(rive, 'button', 'onClick');
+  const onClickInput = useStateMachineInput({
+    rive: rive,
+    stateMachineName: 'button',
+    inputName: 'onClick',
+  });
 
-  return <RiveComponent onClick={() => onClickInput && onClickInput.fire())} />;
+  return <RiveComponent onClick={() => onClickInput && onClickInput.fire()} />;
 }
 
 export default Example;
 ```
 
-#### Parameters
+#### params
 
 - `rive`: A `Rive` object. This is returned by the `useRive` hook.
 - `stateMachineName`: Name of the state machine.

examples/basic/package.json

@@ -9,7 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
+    "rive-react": "file:../..",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/basic/src/App.js

@@ -1,9 +1,9 @@
-import Rive from "rive-react";
+import Rive from 'rive-react';
 
 function App() {
   return (
     // The animation will fit to the parent element.
-    <div style={{ height: "500px", width: "500px" }}>
+    <div style={{ height: '500px', width: '500px' }}>
       <Rive src="poison-loader.riv" autoplay />
     </div>
   );

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6913,9 +6913,9 @@
       }
     },
     "rive-js": {
-      "version": "0.7.29",
-      "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.29.tgz",
-      "integrity": "sha512-f5WNGQw9CT3d91SZoubJiGjXLTxaMexf6KdeHe2233d10pKTOSxPN+o0sn4e2gBdGYYwgpeYC8pNKGX0TVmhLA=="
+      "version": "0.7.30",
+      "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.30.tgz",
+      "integrity": "sha512-9UqrpwqoaXCwEeLblfsnEZocf+s/OswJm10pjYI50uxYmFgKpbuyllIjW0XkQxJuWETXkhhUW+ESdhJ5lc1POA=="
     },
     "rollup": {
       "version": "1.32.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "rive-js": "0.7.29"
+    "rive-js": "0.7.30"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

src/hooks/useRive.tsx

@@ -6,7 +6,7 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from 'rive-js';
+import { Rive, EventType, StateMachineInputType } from 'rive-js';
 import {
   UseRiveParameters,
   UseRiveOptions,
@@ -228,7 +228,34 @@ export default function useRive(
     );
   }, []);
 
+  const debug = useCallback(() => {
+    if (!rive) {
+      console.log({
+        loaded: false,
+      });
+      return;
+    }
+
+    const stateMachines = rive.stateMachineNames.map((stateMachineName) => ({
+      stateMachineName,
+      stateMachineInputs: (rive.stateMachineInputs(stateMachineName) ?? []).map(
+        (stateMachineInput) => ({
+          name: stateMachineInput.name,
+          value: stateMachineInput.value,
+          type: StateMachineInputType[stateMachineInput.type],
+        })
+      ),
+    }));
+
+    console.log({
+      activeArtboard: rive.activeArtboard,
+      animationsNames: rive.animationNames,
+      stateMachines,
+    });
+  }, [rive]);
+
   return {
+    debug,
     canvas: canvasRef.current,
     setCanvasRef,
     setContainerRef,

src/hooks/useStateMachineInput.ts

@@ -1,28 +1,29 @@
 import { useState, useEffect } from 'react';
 import { Rive, StateMachineInput } from 'rive-js';
+import { UseStateMachineInputParameters } from '../types';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.
  *
- * @param rive - Rive instance
- * @param stateMachineName - Name of the state machine
- * @param inputName - Name of the input
+ * @param params.rive - Rive Instance
+ * @param params.stateMachineName - Name of the state machine
+ * @param params.inputName - Name of the state machine input
  * @returns
  */
 export default function useStateMachineInput(
-  rive: Rive | null,
-  stateMachineName?: string,
-  inputName?: string
+  params: UseStateMachineInputParameters
 ) {
   const [input, setInput] = useState<StateMachineInput | null>(null);
 
+  const { rive, stateMachineName, inputName } = params;
+
   useEffect(() => {
     if (!rive || !stateMachineName || !inputName) {
       setInput(null);
     }
 
     if (rive && stateMachineName && inputName) {
-      const inputs = rive.stateMachineInputs(stateMachineName);
+      const inputs = (rive as Rive).stateMachineInputs(stateMachineName);
       if (inputs) {
         const selectedInput = inputs.find((input) => input.name === inputName);
         setInput(selectedInput || null);

src/types.ts

@@ -1,6 +1,18 @@
 import { RefCallback, ComponentProps } from 'react';
 import { Rive, RiveParameters } from 'rive-js';
 
+/**
+ * @typedef UseStateMachineInputParameters
+ * @property rive - Rive Instance
+ * @property stateMachineName - Name of the state machine
+ * @property inputName - Name of the input
+ */
+export type UseStateMachineInputParameters = {
+  rive: Rive | null;
+  stateMachineName?: string;
+  inputName?: string;
+};
+
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 
 export type UseRiveOptions = {
@@ -24,6 +36,7 @@ export type Dimensions = {
  * @property rive - The loaded Rive Animation
  */
 export type RiveState = {
+  debug: () => void;
   canvas: HTMLCanvasElement | null;
   setCanvasRef: RefCallback<HTMLCanvasElement>;
   setContainerRef: RefCallback<HTMLElement>;