rive-app / rive-app/rive-react
Bug: Nested artboard return no inputs for both parent and child with nested input
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 58
- Avg merge
- 3h 23m
- Merged PRs (30d)
- 6
Description
I have an .riv file created with the latest Rive editor, and it has parent and chid artboards as nested artboard.
The @rive-react library version is the latest one up to now: "@rive-app/react-canvas": "^4.17.10",
Rive file is initialized as below
const { RiveComponent, rive } = useRive({
src,
parentStateMachines, // declared as props
artboard: 'Website', // the 2nd item in artboard array
autoplay: true,
useDevicePixelRatio: true,
layout: new Layout({
fit: Fit.Cover, // Adjust this to Fit.Contain or Fit.Fill as needed
alignment: Alignment.Center, // Center alignment
}),
onLoadError: () => {console.log('Error while loading')}
});
ISSUE 1: Active artboard must be hard-coded
With nested artboard, when the rive file is loaded in React application, rive's contents returns an array of arboards like below and it orders alphabetically.
artboards: (2) [{…}, {…}][[Prototype]]: Object
It means, correct me if I'm wrong, when adding Rive file to initilize, we need to 'hard code' the parent artboard, otherwise, react-rive library will load the 1st element in the artboard array.
ISSUE 2: Nested state machine has zero Inputs in return
Using useStateMachineInput hook seems not work anymore. I tried with both parent and child input but it return null.
const parentInput = useStateMachineInput(rive, parentStateMachines, 'Zoom_in');
const childInput = useStateMachineInput(rive, childStateMachines, '"isHeadlineZoomed"');
=> all of them return null
So, to check the loaded rive file, I use useEffect as below
useEffect(() => {
if (rive) {
console.log("Rive contents:", rive.contents);
// Log artboards and state machines
const artboards = rive.contents.artboards;
artboards.forEach((artboard, index) => {
console.log(`Artboard ${index}:`, artboard);
});
console.log(`Active Artboard: ${rive.activeArtboard}`);
console.log("State Machines:", rive.stateMachineNames);
// Check if the state machine exists
if (rive.stateMachineNames.includes("Website State Machine")) {
const inputs = rive.stateMachineInputs("Website State Machine");
console.log("Inputs:", inputs);
} else {
console.error("State machine 'Website State Machine' not found.");
}
}
}, [rive]);
and the outputs are:
As you can see, rive file is loaded and initialize successfully but doesn't have any input in stateMachineInputs. I am aware and already did the "Expose to parent artboard" with child artboard's inputs.
I also checked the latest document with this link Nested Inputs however the functions (or hook) are very limited:
setNumberStateAtPath(inputName: string, value: number, path: string)
setBooleanStateAtPath(inputName: string, value: boolean, path: string)
fireStateAtPath(inputName: string, path: string)
This is also mean that, there's no GET hook or function to get and update the artboard input from rive, which can be done by using useStateMachineInput when we have single artboard rive file.
note: I already updated the latest rive-react in my project
"dependencies": {
"@rive-app/react-canvas": "^4.17.10",
}
Any feedback or suggestions are welcomed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the report with the attached .riv archive, starting from the useRive initialization and the useStateMachineInput and stateMachineInputs calls shown in the issue. Compare parent and child artboard behavior, including active-artboard selection and exposed nested inputs; done means the expected inputs can be identified and accessed, or the limitations are clearly documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100