The <Rive /> Component

The <Rive /> component is the quickest and most declarative way to add a Rive animation to your React application. It handles loading, instantiation, and playback with a simple set of props.

Basic Usage

Here is a basic implementation:

import Rive from '@rive-app/react-canvas';

const MyAnimation = () => (
  <Rive
    src="https://cdn.rive.app/animations/vehicles.riv"
    stateMachines="bumpy"
    style={{ height: '500px', width: '500px' }}
  />
);

Component Props

In addition to standard canvas attributes like style and className, the <Rive /> component accepts the following props to control the animation:

• src (string): Required. The path or URL to your .riv file.

• artboard (string): The name of the artboard to render. If not specified, the first artboard in the file is used.

• animations (string | string[]): The name of an animation or a list of animation names to play immediately. The component automatically sets autoplay to true when this is provided.

• stateMachines (string | string[]): The name of a state machine or a list of state machine names to play immediately. The component automatically sets autoplay to true when this is provided.

• layout (Layout): A Rive Layout object to configure the Fit and Alignment of the animation within the canvas. See the Layout Guide for more details.

  import { Layout, Fit, Alignment } from '@rive-app/react-canvas';
  
  <Rive 
    src="..." 
    layout={new Layout({ 
      fit: Fit.Cover, 
      alignment: Alignment.CenterRight 
    })}
  />

• useOffscreenRenderer (boolean, default: true): For WebGL renderers only. Determines if the renderer uses an offscreen canvas. It's recommended to keep this enabled for better performance when multiple Rive animations are on the same page.

• shouldDisableRiveListeners (boolean, default: false): If true, prevents the Rive runtime from attaching its own event listeners (like pointer events for state machines) to the canvas.

• shouldResizeCanvasToContainer (boolean, default: true): If true, the component will automatically resize the canvas element to fill its parent container.

• automaticallyHandleEvents (boolean, default: false): If true, the runtime will automatically handle Rive Events, such as opening a URL when an OpenUrlEvent is fired. See the Events Guide for more details.

Children for Accessibility

You can pass child elements to the <Rive /> component. These will be rendered inside the <canvas> element, which can be useful for providing fallback content for screen readers or for browsers that do not support canvas.

<Rive src="loader.riv">
  <p>Loading animation</p>
</Rive>

For more advanced control, such as accessing the Rive instance directly to manipulate inputs or listen to events, see the documentation for the useRive Hook.