Rive React

Rive React

React components and hooks for Rive animations.

Installation

# Canvas renderer (recommended)
npm install @rive-app/react-canvas

# WebGL renderer (complex animations)
npm install @rive-app/react-webgl

Quick Start

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

function MyAnimation() {
  const { RiveComponent } = useRive({
    src: 'animation.riv',
    stateMachines: 'State Machine 1',
    autoplay: true,
  });

  return <RiveComponent />;
}

useRive Hook

The main hook for Rive integration:

const {
  RiveComponent,    // The canvas component to render
  rive,            // Rive instance for direct control
} = useRive({
  src: 'animation.riv',
  stateMachines: 'State Machine',
  autoplay: true,
});

Controlling Inputs

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

function ControlledAnimation() {
  const { rive, RiveComponent } = useRive({
    src: 'animation.riv',
    stateMachines: 'State Machine',
    autoplay: true,
  });

  // Get typed input
  const isActive = useStateMachineInput(rive, 'State Machine', 'isActive');
  const progress = useStateMachineInput(rive, 'State Machine', 'progress');

  return (
    <>
      <RiveComponent />
      <button => isActive && (isActive.value = !isActive.value)}>
        Toggle
      </button>
      <input
        type="range"
        => progress && (progress.value = +e.target.value)}
      />
    </>
  );
}

Callbacks

const { RiveComponent } = useRive({
  src: 'animation.riv',
  stateMachines: 'State Machine',
  autoplay: true,
  onLoad: () => console.log('Loaded'),
  onStateChange: (event) => console.log('State:', event.data),
  onPlay: () => console.log('Playing'),
  onPause: () => console.log('Paused'),
});

Rules

@file rules/use-rive.md @file rules/callbacks.md @file rules/layout.md @file rules/scroll-animations.md