Integration planning guide. The snippet is an application-level pattern, not a verified Rive SDK example. Connect it through the API supported by your actual file and installed runtime.
Keep ownership in one component
Create one component that owns the animation instance and its lifecycle. Keep application state above it, then pass a small set of named values into the visual layer. Mounting a canvas should not start a network request or change product state.
Define loading and failure behavior
Reserve the artboard space before the asset arrives. Keep the poster or status text visible until the file is ready, and retain it if loading fails. Avoid re-creating the runtime instance on every React render.
Clean up on unmount
Remove event listeners and release the runtime instance using the lifecycle guidance for your installed package. Test route changes, development remounting and repeated transitions between screens.
A small starting point
// Application-level contract, not a Rive SDK integration.
export function assistantProps(request) {
return {
phase: request.failed ? "error" :
request.speaking ? "speaking" :
request.pending ? "thinking" : "idle",
interactive: !request.disabled
};
}Before calling it done
- Record the exact runtime version and exported asset used in validation.
- Test the normal sequence, an interruption, a failed load and screen re-entry.
- Confirm the same information remains readable with reduced motion or no animation.
Use the official Rive runtime documentation for current APIs and feature support.