bug with `rive.stateMachineInputs` method in Web (JS/React) Runtime SDK
In a React 18 app I am not able to get a useful result from calling rive.stateMachineInputs(stateMachineName) .
I am using @rive-app/react-canvas and have tested versions "4.17.8" and "4.17.10" (latest as of Jan 31, 2025).
In the SDK source, I noticed the syntax for stateMachineInputs was different than another method which is working fine, stateMachineNames . There is no get specified for stateMachineInputs . Could this be the reason for the bug?
The nature of the bug actually crashes in the vite (5.4.11) dev server, but only returns undefined in production builds.
Update 1: A code example demonstrating the issue:
Update 2: It's fixed! Before reading the inputs, I needed to activate the state machine by passing its name to the rive react component.
Update 3: It stopped working!?
Using multiple state machines on the same artboard, rather than a single state machine with multiple layers, can be very problematic. In fact, we're about to drop support for this in the runtimes.
If you want to share your .rev, I'd be more than happy to help you transition to layers.
I found something I can live with for the moment. I was not blocked by using multiple state machines per artboard. Instead I think the real problem is that the "rive" instance returned from the hook is not IMMEDIATELY usable to obtain state machine "inputs". I start a timer after I get the rive instance and eventually the inputs are accessible. It's pretty ugly IMO but it works. It would be great if the rive instance returned was usable immediately, because react only re-runs hooks and components when the rive instance changes.
I made a new example that demonstrates the workaround.
Oh, that makes sense. Sorry about that. :)
Have you tried using useStateMachineInput instead of getting the inputs manually? https://rive.app/docs/runtimes/react/parameters-and-return-values#usestatemachineinput
I just found this tool and it does a great job and quickly displaying the contents of a runtime export. I want to do the same. I did a little digging in their code and noticed they avoid the react package. I will probably do the same soon. The react package doesn't feel event driven.
https://github.com/albertcai101/rive-rip