stevysmith/rive-skills/rive-react

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

import { useRive } from '@rive-app/react-canvas';
function MyAnimation() {
  const { RiveComponent } = useRive({
    src: 'animation.riv',
    stateMachines: 'State Machine 1',
    autoplay: true,
  });
  return <RiveComponent />;
}

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

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)}
      />
    </>
  );
}

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'),
});