Integration boundary
What connects to what
A React component or hook owns AvatarSDK initialization, avatar loading, AvatarView mounting, controller startup, and deterministic unmount cleanup.
Prerequisites
- A React application with a supported build tool
- @spatius/avatarkit
- Spatius credentials delivered through an appropriate token flow
- Browser support for the renderer selected by AvatarKit
Implementation path
Build a testable baseline
- 1
Run the official Web sample-audio quickstart before adding framework state.
- 2
Initialize AvatarKit outside render loops and keep the avatar container mounted while the session is active.
- 3
Load the avatar and create the view only after the container ref exists.
- 4
Connect the selected Direct or Backend Mode audio path.
- 5
Disconnect and dispose session resources in effect cleanup, then test a development Strict Mode remount.
Decision guidance
Best for and not best for
Best for
- React product interfaces with custom session controls
- Teams that need explicit loading and failure states
Not best for
- Static pages that do not need a live avatar session
- Teams looking for a no-code embed
Evidence-aware assessment
Advantages and limitations
Advantages
- Matches component-based product UIs
- Makes loading, error, and reconnect states easy to represent
- Can isolate the avatar surface behind one application component
Limitations
- React is not a native Spatius connector; the value comes from the maintained reference implementation
- Strict Mode can expose duplicate initialization if lifecycle ownership is unclear
- The supplied evidence does not include a framework-specific performance benchmark
React StrictMode can run effects twice in development. Initialization must be idempotent, and the controller, view, audio context, and connection must all be released. Indexing this guide does not convert an architecture blueprint into a claimed native connector; run and document the validation checklist before production use.
Page-specific FAQ
Implementation questions
Is there a separate React SDK?
The core browser package is @spatius/avatarkit; the official demo repository provides a React reference around that SDK.
Why test a Strict Mode remount?
Development Strict Mode can mount and clean up effects more than once, which helps reveal duplicated SDK initialization or leaked connections.
Should session tokens live in React source?
No. Treat session and provider secrets according to the official credential flow and avoid committing or embedding long-lived secrets.
Primary evidence
Sources and verification
Reviewed 2026-08-10. Recheck versions and implementation details before publication.
Continue exploring