Rive React Documentation

Welcome to the official documentation for rive-react, the React runtime library for Rive. This library serves as a powerful wrapper around the Rive JavaScript/Wasm runtime, providing intuitive components and hooks to integrate beautiful, interactive animations into your React applications.

Rive is an end-to-end pipeline that combines an interactive design tool, a stateful graphics format, and lightweight multi-platform runtimes. This guarantees that what you design in the Rive Editor is exactly what ships in your apps, games, and websites.

Key Features

• Declarative Components & Hooks: Use the simple <Rive /> component for quick integration or the powerful useRive hook for full control over your animations.
• Multiple Renderer Support: Choose the best renderer for your needs. rive-react is distributed in four distinct packages, allowing you to optimize for performance or bundle size with Canvas, WebGL, and lite variants.
• State Machine Integration: Go beyond simple timeline animations. Trigger states, update inputs, and listen for events directly from your React code to create truly interactive experiences.
• Advanced Data Binding: Leverage the useViewModel family of hooks to seamlessly connect your application state to your Rive animations, decoupling animation logic from your app's business logic for cleaner, more maintainable code.
• Comprehensive Event System: Listen for events dispatched from your Rive state machines to trigger actions and callbacks within your React application.

Getting Started

Ready to dive in? Here are some starting points:

• Installation: Learn how to add rive-react to your project and choose the right renderer package for your needs.
• Quick Start: Follow a simple tutorial to get your first Rive animation running in minutes.

For more resources, check out the official Rive community and documentation:

• Rive Homepage
• General Rive Docs
• React Docs on Rive.app
• Rive Community & Support