some improvements

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>
   );

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 params.rive - Rive Instance
- * @param stateMachineName - Name of the state machine
+ * @param params.stateMachineName - Name of the state machine
- * @param inputName - Name of the input
+ * @param params.inputName - Name of the state machine input
  * @returns
  */
 export default function useStateMachineInput(
-  rive: Rive | null,
+  params: UseStateMachineInputParameters
-  stateMachineName?: string,
-  inputName?: string
 ) {
   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>;