Feat: add useStateMachineInputs hook

[eric-jy-park]

Add new useStateMachineInputs Hook for fetching multiple stateMachine inputs from a rive file

Description

This pull request introduces a new hook, useStateMachineInputs, designed to easily get multiple inputs from a variable number of inputNames.

Previously, you had to map over the inputNames array to create input for each of them. Since that behavior is against the rules of hooks, I decided to create this new hook.

---

This would be against the rules of hooks. const inputs = inputNames.map(inputName => useStateMachineInput(rive, stateMachine, inputName));

With this hook, you can do it this way. const inputs = useStateMachineInputs(rive, stateMachine, inputList);

---

Changes Made

CreateduseStateMachineInputs.ts

[bodymovin]

thanks for the PR! looks good overall, just left some comments on some details.

[lancesnider]

Thanks for the PR! Right now this is how you'd use it, right?

const stateMachineInputs = useStateMachineInputs(rive, STATE_MACHINE_NAME, [
  { name: ON_HOVER_INPUT_NAME },
  { name: ON_PRESSED_INPUT_NAME },
]);

const onHoverInput = stateMachineInputs?.find(input => input.name === ON_HOVER_INPUT_NAME);
const onPressedInput = stateMachineInputs?.find(input => input.name === ON_PRESSED_INPUT_NAME);

I'd love to see it to where defining each input didn't require extra component code. Maybe something like:

const [onHoverInput, onPressedInput] = useStateMachineInputs(rive, STATE_MACHINE_NAME, [
  { name: ON_HOVER_INPUT_NAME },
  { name: ON_PRESSED_INPUT_NAME },
]);

[lancesnider]

Does anyone else get this warning when using it in a component: useStateMachineInputs.ts:39 Warning: Maximum update depth exceeded

[eric-jy-park]

Thanks for the PR! Right now this is how you'd use it, right?

const stateMachineInputs = useStateMachineInputs(rive, STATE_MACHINE_NAME, [
  { name: ON_HOVER_INPUT_NAME },
  { name: ON_PRESSED_INPUT_NAME },
]);

const onHoverInput = stateMachineInputs?.find(input => input.name === ON_HOVER_INPUT_NAME);
const onPressedInput = stateMachineInputs?.find(input => input.name === ON_PRESSED_INPUT_NAME);

I'd love to see it to where defining each input didn't require extra component code. Maybe something like:

const [onHoverInput, onPressedInput] = useStateMachineInputs(rive, STATE_MACHINE_NAME, [
  { name: ON_HOVER_INPUT_NAME },
  { name: ON_PRESSED_INPUT_NAME },
]);

I just needed them to be fired all at once so I didn't have to manage them one by one. But yeah that seems like a better approach to me too! I'll change that!

[eric-jy-park]

Does anyone else get this warning when using it in a component: useStateMachineInputs.ts:39 Warning: Maximum update depth exceeded

I'll take a look at it!

[eric-jy-park]

I made some changes to the code! 2a26db1

1. The hook now returns the inputs as an array, where each of the inputs are in the order they were in in the inputNames array
2. Codes that were unnecessarily checking rive/stateMachineName/inputNames have been removed.
3. The code will run faster, as the time complexity has been cut from O(n*m) to O(max(n, m)).

[eric-jy-park]

Does anyone else get this warning when using it in a component: useStateMachineInputs.ts:39 Warning: Maximum update depth exceeded

@lancesnider Are you still seeing this warning? I don't seem to be getting it right now from where I'm using it.

[eric-jy-park]

@bodymovin @lancesnider Any updates on getting this PR merged?