Quick Start Guide

This guide will walk you through rendering a simple Rive animation in your React application.

Prerequisites

Make sure you have installed one of the rive-react packages as described in the Installation guide. For this example, we'll use @rive-app/react-canvas.

Step 1: Import the Rive Component

The easiest way to get started is by using the default <Rive /> component. Import it from the package you installed.

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

Step 2: Render the Component

The <Rive /> component requires a src prop, which is the URL to your .riv file. You can export files from the Rive editor or use a public URL.

Here's a complete example of a simple component that renders a Rive avatar animation:

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

const SimpleAnimation = () => {
  return (
    <div style={{ height: '500px', width: '500px' }}>
      <Rive
        src="avatars.riv"
        artboard="Avatar 3"
        autoplay={true}
      />
    </div>
  );
};

export default SimpleAnimation;

Breakdown of the Code

  • import Rive from '@rive-app/react-canvas';: Imports the main component.
  • <div style={{...}}>: The Rive component will expand to fill its parent container. It's important to give the parent a defined size.
  • src="avatars.riv": Specifies the Rive file to load. This should be placed in your public folder or hosted at a URL.
  • artboard="Avatar 3": (Optional) Specifies which artboard from the file to display. If omitted, the first artboard is used.
  • autoplay={true}: (Optional) Tells Rive to start playing the default animation as soon as it's loaded.

That's it! You should now see the Rive animation playing in your application. For more advanced control and interactivity, explore the guides on the useRive Hook and State Machines.