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

return ; }


## 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

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

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

rive-react

Rive React

Installation

Quick Start

More from stevysmith/rive-skills

rive-scripting

rive-generator

rive-web