# Rive React

> Trigger when: (1) Using @rive-app/react-canvas or @rive-app/react-webgl, (2) Using useRive hook or RiveComponent, (3) Building React components with Rive animations, (4) User mentions "Rive React" or "useRive", (5) Implementing scroll-based or parallax animations with Rive. Best practices for integrating Rive animations in React applications using the official Rive React package. Covers hooks, layout, and scroll animations.

- Skill: `stevysmith/rive-react` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add stevysmith/rive-react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/stevysmith/rive-react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: stevysmith (https://skillmd.com/u/stevysmith)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/stevysmith/rive-react

---


# Rive React

React components and hooks for Rive animations.

## Installation

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

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

## Quick Start

```tsx
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:

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

## Controlling Inputs

```tsx
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 onClick={() => isActive && (isActive.value = !isActive.value)}>
        Toggle
      </button>
      <input
        type="range"
        onChange={(e) => progress && (progress.value = +e.target.value)}
      />
    </>
  );
}
```

## Callbacks

```tsx
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