@rive-app/react-canvas

What is @rive-app/react-canvas?

@rive-app/react-canvas is an npm package that allows you to integrate Rive animations into your React applications. Rive is a powerful tool for creating interactive animations and graphics, and this package provides a way to render these animations on a canvas within a React component.

What are @rive-app/react-canvas's main functionalities?

Rendering Rive Animations

This feature allows you to render a Rive animation by specifying the path to the .riv file. The RiveComponent takes care of loading and displaying the animation.

import { RiveComponent } from '@rive-app/react-canvas';

function App() {
  return (
    <div>
      <RiveComponent src="path/to/animation.riv" />
    </div>
  );
}

export default App;

Controlling Animation State

This feature allows you to control the state of the animation, such as playing or pausing it. The useRive hook provides access to the Rive instance, enabling you to call methods like play() to control the animation.

import { RiveComponent, useRive } from '@rive-app/react-canvas';

function App() {
  const { rive, RiveComponent } = useRive({ src: 'path/to/animation.riv' });

  const playAnimation = () => {
    rive.play();
  };

  return (
    <div>
      <RiveComponent />
      <button onClick={playAnimation}>Play Animation</button>
    </div>
  );
}

export default App;

Handling Animation Events

This feature allows you to handle events related to the animation, such as when it is loaded. The Rive instance provides an event system that you can use to listen for various events.

import { RiveComponent, useRive } from '@rive-app/react-canvas';

function App() {
  const { rive, RiveComponent } = useRive({ src: 'path/to/animation.riv' });

  rive.on('load', () => {
    console.log('Animation loaded');
  });

  return (
    <div>
      <RiveComponent />
    </div>
  );
}

export default App;

Other packages similar to @rive-app/react-canvas

lottie-react

lottie-react is a package for rendering Lottie animations in React applications. Lottie is a library for rendering Adobe After Effects animations in real-time. Compared to @rive-app/react-canvas, lottie-react focuses on Lottie animations, which are typically used for more complex, pre-rendered animations, whereas Rive is designed for interactive and state-driven animations.

react-three-fiber

react-three-fiber is a React renderer for Three.js, a popular 3D graphics library. It allows you to create complex 3D animations and scenes within a React application. While react-three-fiber is more focused on 3D graphics and scenes, @rive-app/react-canvas is specialized in 2D interactive animations.

react-spring

react-spring is a spring-physics-based animation library for React applications. It allows you to create smooth animations and transitions. While react-spring is more general-purpose and can be used for a variety of animation needs, @rive-app/react-canvas is specifically tailored for integrating Rive animations.

README

@rive-app/react-canvas

Output for rive-react using the backing @rive-app/canvas JS runtime

Changelog

v4.18.7

9 April 2025

• chore: release 4.18.7 cc0e916
• update to 2.26.8 8244982