PcRive

A reusable React / Next.js Rive animation component with support for:

• State machine inputs
• Triggers / numbers / booleans
• Animation control via refs
• Event listeners
• Lazy loading with IntersectionObserver
• Next.js SSR safety
• Developer debug panel
• Works with different Rive files having different input names

Built on top of @rive-app/react-canvas.

1. Installation

Install the required dependency:

npm install @rive-app/react-canvas

or

yarn add @rive-app/react-canvas

2. Import Component

If you exported the component like this:

import PcRive from "./src/PcRive.jsx"; export default PcRive;

Then use it in your project:

import PcRive from "pc-rive";

or locally:

import PcRive from "./PcRive";

3. Basic Usage (Simple Animation)

This loads a Rive animation and plays it automatically.

import PcRive from "./PcRive";

export default function Example() {
  return (
    <PcRive
      src="/animation.riv"
      autoplay={true}
      width="400px"
      height="400px"
    />
  );
}

4. Using State Machine Inputs

You can control inputs dynamically.

import { useState } from "react";
import PcRive from "./PcRive";

export default function Example() {

  const [inputs,setInputs] = useState({
    isOpen: true,
    speed: 2
  });

  return(
    <PcRive
      src="/robot.riv"
      stateMachines="RobotState"
      inputs={inputs}
      width="400px"
      height="400px"
    />
  );
}

5. Trigger Inputs

Trigger inputs fire events inside the Rive state machine.

import { useState } from "react";
import PcRive from "./PcRive";

export default function Example(){

  const [inputs,setInputs] = useState({});

  function fireTrigger(){
    setInputs({
      jump:true
    });
  }

  return(
    <>
      <button onClick={fireTrigger}>Jump</button>

      <PcRive
        src="/character.riv"
        stateMachines="State Machine 1"
        inputs={inputs}
        width="400px"
        height="400px"
      />
    </>
  )
}

6. Animation Only (Without State Machine)

You can directly run animations.

<PcRive
  src="/loading.riv"
  animations="loop"
  autoplay={true}
  width="200px"
  height="200px"
/>

7. Using Event Listeners

Listen to events fired from Rive.

<PcRive
  src="/game.riv"
  stateMachines="GameState"
  onRiveEvent={(event)=>{
    console.log("Rive Event:",event);
  }}
/>

8. Listening to State Changes

You can listen to state transitions.

<PcRive
  src="/machine.riv"
  stateMachines="State Machine 1"
  onStateChange={(state)=>{
    console.log("State changed:",state);
  }}
/>

9. Using Animation + Event Listener

<PcRive
  src="/interactive.riv"
  stateMachines="MainState"
  autoplay={true}
  onRiveEvent={(event)=>{
    console.log(event);
  }}
/>

10. Control Animation With Ref

You can manually control the animation.

import { useRef } from "react";
import PcRive from "./PcRive";

export default function Example(){

  const riveRef = useRef();

  return(
    <>
      <button onClick={()=>riveRef.current.play()}>
        Play
      </button>

      <button onClick={()=>riveRef.current.pause()}>
        Pause
      </button>

      <button onClick={()=>riveRef.current.reset()}>
        Reset
      </button>

      <PcRive
        ref={riveRef}
        src="/animation.riv"
        autoplay={false}
        width="400px"
        height="400px"
      />
    </>
  )
}

11. Trigger Input Using Ref

<button
  onClick={()=>{
    riveRef.current.fireInput("jump");
  }}
>
Jump
</button>

12. Set Input Value Using Ref

riveRef.current.setInput("speed",5);

13. Lazy Loading (Automatic)

Lazy loading loads animation only when visible on screen.

Enabled by default.

<PcRive
  src="/hero.riv"
  lazy={true}
/>

Disable lazy loading:

<PcRive
  src="/hero.riv"
  lazy={false}
/>

14. Next.js SSR Safe Usage

Component automatically checks for browser environment.

Example:

<PcRive
  src="/animation.riv"
  width="500px"
  height="500px"
/>

No additional configuration required.

15. Debug Panel (Developer Mode)

Shows live controls for all Rive inputs.

Enable debug mode:

<PcRive
  src="/robot.riv"
  stateMachines="RobotState"
  debug={true}
/>

Debug panel allows:

• Trigger inputs
• Change number inputs
• Toggle boolean inputs

Useful during development to inspect animation inputs.

16. Layout Configuration

Control how animation fits inside container.

import { Fit, Alignment } from "@rive-app/react-canvas";

<PcRive
  src="/animation.riv"
  layout={{
    fit: Fit.Contain,
    alignment: Alignment.Center
  }}
/>

17. Props

src Path to the .riv file

artboard Artboard name inside Rive

stateMachines State machine name

animations Animation name

autoplay Automatically start animation

inputs Object containing Rive inputs

width Component width

height Component height

className Custom CSS class

debug Enable developer debug panel

lazy Enable lazy loading

layout Rive layout configuration

onLoad Called when animation loads

onStateChange Called when state changes

onRiveEvent Called when Rive event fires

18. Where This Can Be Used

This component works in:

React (CRA / Vite)

Next.js

React Dashboard Panels

Landing Pages

Interactive UI animations

Games using Rive state machines

Component Libraries

19. Example Real Use Cases

Loading animations Interactive buttons Game UI characters Robot assistants Dashboard animated indicators Product landing pages Education visual animations

License

MIT