Feat: add useStateMachineInputs hook

src/hooks/useStateMachineInputs.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { EventType, Rive, StateMachineInput } from '@rive-app/canvas';
+
+/**
+ * Custom hook for fetching multiple stateMachine inputs from a rive file.
+ * Particularly useful for fetching multiple inputs from a variable number of input names.
+ *
+ * @param rive - Rive instance
+ * @param stateMachineName - Name of the state machine
+ * @param inputNames - Names of the inputs
+ * @returns StateMachineInput[] | null
+ */
+export default function useStateMachineInputs(
+  rive: Rive | null,
+  stateMachineName?: string,
+  inputNames?: {
+    name: string;
+    initialValue?: number | boolean;
+  }[]
+) {
+  const [inputs, setInputs] = useState<StateMachineInput[] | null>(null);
+
+  useEffect(() => {
+    function setStateMachineInput() {
+      if (!rive || !stateMachineName || !inputNames) {
+        setInputs(null);
+      }
+
+      if (rive && stateMachineName && inputNames) {
+        const inputs = rive.stateMachineInputs(stateMachineName);
+        if (inputs) {
+          const selectedInputs = inputs.filter((input) =>
+            inputNames.some((inputName) => inputName.name === input.name)
+          );
+          if (selectedInputs) {
+            selectedInputs.forEach((input) => {
+              const targetInputName = inputNames.find(inputName => inputName.name === input.name);
+              if(targetInputName?.initialValue){
+                input.value = targetInputName.initialValue
+              }
+            });
+          }
+          setInputs(selectedInputs);
+        }
+      } else {
+        setInputs(null);
+      }
+    }
+    setStateMachineInput();
+    if (rive) {
+      rive.on(EventType.Load, () => {
+        // Check if the component/canvas is mounted before setting state to avoid setState
+        // on an unmounted component in some rare cases
+        setStateMachineInput();
+      });
+    }
+  }, [inputNames, rive, stateMachineName]);
+
+  return inputs;
+}

src/index.ts

@@ -3,8 +3,22 @@ import useRive from './hooks/useRive';
 import useStateMachineInput from './hooks/useStateMachineInput';
 import useResizeCanvas from './hooks/useResizeCanvas';
 import useRiveFile from './hooks/useRiveFile';
+import useStateMachineInputs from './hooks/useStateMachineInputs';
 
 export default Rive;
-export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile , RiveProps };
-export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions } from './types';
+export {
+  useRive,
+  useStateMachineInput,
+  useStateMachineInputs,
+  useResizeCanvas,
+  useRiveFile,
+  RiveProps,
+};
+export {
+  RiveState,
+  UseRiveParameters,
+  UseRiveFileParameters,
+  UseRiveOptions,
+} from './types';
+
 export * from '@rive-app/canvas';