Skip to main content

React

The Rive React runtime is a React wrapper around @rive-app/webgl2 (which uses WebGL2 — a browser API that uses your device's GPU for fast, high-quality graphics). It gives you a ready-made component and hooks (a React function that lets a component access shared logic — in this case, Rive playback controls and the rendered canvas element) so you can drop Rive animations into any React app without writing low-level canvas code. TypeScript types are included.

GitHub: rive-app/rive-react

Getting Started​

1
Install the dependency

Pick the package that matches the renderer you need:

  • @rive-app/react-webgl2 — Uses the Rive Renderer. Full feature support. (recommended)
  • @rive-app/react-canvas — Canvas-only, no Rive Renderer.
  • @rive-app/react-canvas-lite — Smallest bundle, limited features.

The Rive Renderer is Rive's own high-quality graphics engine. It gives you full feature support, including advanced visual effects.

npm i --save @rive-app/react-webgl2
tip

For the best visual quality on Chrome, you can enable an optional graphics feature. Go to chrome://flags and enable WebGL Draft Extensions, then restart Chrome. If you skip this step, Rive still works — it just uses a slightly less precise rendering mode automatically.

2
Use the Rive component

The default export is a React component. Pass a src and stateMachines prop to display a Rive animation.

import Rive from '@rive-app/react-webgl2';

export const Simple = () => (
  <Rive
    src="https://cdn.rive.app/animations/vehicles.riv"
    stateMachines="bumpy"
  />
);

See Parameters and Return Values for all supported props.

3
Use the useRive hook

Use the useRive hook when you need direct access to the Rive instance (for example, to call play, pause, or read state). It returns two things:

  • rive — the Rive instance you call API methods on.
  • RiveComponent — the React component that mounts the canvas in the DOM.
import { useRive } from '@rive-app/react-webgl2';

export default function Simple() {
  const { rive, RiveComponent } = useRive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    stateMachines: 'bumpy',
    autoplay: false,
  });

  return (
    <RiveComponent
      onMouseEnter={() => rive && rive.play()}
      onMouseLeave={() => rive && rive.pause()}
    />
  );
}
note

Rive doesn't initialize until <RiveComponent /> is rendered, because it needs the <canvas> element in the DOM.

The canvas fills its container. Wrap RiveComponent in a sized element or pass a className to control its dimensions.

Conditional Rendering​

Wrap useRive in its own component when you need to show or hide the animation. This lets React unmount the component cleanly and reinitialize it correctly when it mounts again.

// ✅ Correct: isolate useRive in a wrapper
function RiveWrapper() {
  const { rive, RiveComponent } = useRive({ src: '...', stateMachines: '...' });
  return <RiveComponent />;
}

// In parent:
{showRive && <RiveWrapper />}

See this CodeSandbox for a working example.

Resources​