rive-app / rive-app/rive-react
How do I access artboard and view model instance with useRive?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 58
- Avg merge
- 3h 23m
- Merged PRs (30d)
- 6
Description
My rive file got update, if before I used to use rive.setNumberStateAtPath to change my block lines count, now I need to access view model instance to directly change text in that box, for example change its font size.
From rive docs, I received these instructions on how to do it:
Access the View Model Instance:
Within your application, retrieve the Artboard from the loaded Rive file. Then, access the ViewModelInstance associated with that Artboard. This instance contains the properties you’ve defined and bound in the Rive editor.
Modify Properties at Runtime:
Once you have access to the View ModelInstance, you can get or set its properties to reflect changes in your application. For example, if you have a property controlling font size, you can update it based on user input or other runtime conditions.
BUT, the problem is, there is no properties on my rive to get artboard
Here is how I initialize the rive:
Importing everything from @rive-app/react-canvas
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
Start by reviewing the Rive instance initialized through @rive-app/react-canvas and determine how the loaded file and its artboard are exposed. Compare the available API with the documented ViewModelInstance access, and consider the work complete when the requested artboard and view-model properties can be accessed for runtime updates.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100