Skip to content

feat(react): Add useGlobalViewModelInstance hook and support underlying semantics options from the JS runtime#432

Merged
zplata merged 2 commits into
mainfrom
bump-2.39.1
Jul 24, 2026
Merged

feat(react): Add useGlobalViewModelInstance hook and support underlying semantics options from the JS runtime#432
zplata merged 2 commits into
mainfrom
bump-2.39.1

Conversation

@zplata

@zplata zplata commented Jul 24, 2026

Copy link
Copy Markdown
Collaborator

Adds a new hook similar to our existing useViewModelInstance hook, for globals: useGlobalViewModelInstance.

Since these hooks run independently without a convenient way to control bind(), addressing this by creating a "bind scheduler" per Rive instance that schedules a bind once per React commit and dedupes other bind schedules that happen in the same frame. For example, the following would yield best case, one bind() instead of multiple.

// bind main
useViewModelInstance();

// bind globals
useGlobalViewModelInstance();
useGlobalViewModelInstance();
...

return <RiveComponent />

This keeps the declarative approach users expect with useViewModelInstance() while keeping bind() down as much as we can.

This also supports underlying semantics feature through the JS API, no changes needed at this React layer for now.

@zplata
zplata requested review from bodymovin, Copilot and damzobridge and removed request for bodymovin and damzobridge July 24, 2026 15:20

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new React hook for binding global view model instances and introduces a small bind coalescing utility so multiple hook-driven instance registrations in the same React commit result in a single rive.bind().

Changes:

  • Add useGlobalViewModelInstance hook and export it from the public entrypoint.
  • Introduce scheduleBind (microtask-based bind coalescing) and a shared resolveViewModelInstance helper to centralize instance selection.
  • Add Jest tests for the new hook/scheduler and add Storybook examples (including semantics options usage); bump @rive-app/* runtime deps to 2.39.1.

Reviewed changes

Copilot reviewed 16 out of 20 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
test/useViewModelInstance.test.tsx Adds coverage that main-instance binding schedules a coalesced bind.
test/useGlobalViewModelInstance.test.tsx Adds resolution + registration/bind scheduling tests for the new global hook.
test/bindScheduler.test.tsx Verifies bind coalescing semantics and per-Rive-instance isolation.
src/types.ts Introduces UseGlobalViewModelInstanceParameters type for the new hook API.
src/resolveViewModelInstance.ts Adds shared instance resolution helper used by main/global instance hooks.
src/index.ts Exports useGlobalViewModelInstance from the package entrypoint.
src/hooks/useViewModelInstance.ts Switches binding implementation to setViewModelInstance + scheduleBind and reuses the shared resolver.
src/hooks/useGlobalViewModelInstance.ts Implements the new global view model instance hook.
src/bindScheduler.ts Adds bind coalescing scheduler (scheduleBind) using a WeakSet + microtask.
package.json Bumps @rive-app/canvas, @rive-app/canvas-lite, @rive-app/webgl2 to 2.39.1.
package-lock.json Lockfile update for the bumped @rive-app/* dependencies.
examples/src/components/Semantics.tsx Adds a semantics-focused example using semanticsMode / semanticsOptions.
examples/src/components/Semantics.stories.ts Registers the Semantics example in Storybook.
examples/src/components/DataBindingPreRender.tsx Adds example showing pre-render setup of main + global instances via onRiveReady + bind().
examples/src/components/DataBindingPreRender.stories.ts Registers the pre-render globals example in Storybook.
examples/src/components/DataBindingHooks.tsx Adds example showing main + global binding via hooks with autoBind: false.
examples/src/components/DataBindingHooks.stories.ts Registers the hooks-based globals example in Storybook.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/bindScheduler.ts Outdated
Comment thread src/resolveViewModelInstance.ts Outdated

@bodymovin bodymovin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Comment thread src/bindScheduler.ts
@zplata
zplata merged commit 15fb48c into main Jul 24, 2026
1 check passed
@zplata
zplata deleted the bump-2.39.1 branch July 24, 2026 17:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants