`useRive` returned component renders nothing

[t0rbik]

When we use the basic React example by using default package component export, it renders successfully. However, changing logic to use useRive causes component, returned from useRive to render empty <canvas>.

Platform: MacOS 15.1, M2, Arc 1.74.0

Reproduction: https://codesandbox.io/p/sandbox/r5wj5x.

Found similar issue #36, but it was closed and there was no reproduction.

[gabrieloureiro]

I'm having this same problem but using Next 15 and React 19. The canvas still empty after follow all forums steps

// rive.tsx

"use client";

import { Ref, useEffect } from "react";
import { useRive, useStateMachineInput } from "@rive-app/react-canvas-lite";


type RiveProps = {
  ref?: Ref<HTMLCanvasElement> | undefined;
};

function Rive({ ref }: RiveProps) {
  const { rive, RiveComponent } = useRive({
    src: "/avatar.riv",
    stateMachines: "State Machine 1",
    onLoadError: () => console.log("ERROR LOADING RIVE"),
    onLoad: () => console.log("LOADED RIVE"),
    onStateChange: (state) => console.log("STATE CHANGE", state),
    autoplay: true,
  });

  useEffect(() => {
    if (rive) {
      console.log("Rive object:", rive);
    } else {
      console.log("Rive object not initialized");
    }
  }, [rive]);

  const toggleInput = useStateMachineInput(rive, "State Machine 1", "Toggle");

  useEffect(() => {
    if (toggleInput) {
      console.log("Toggle input is ready:", toggleInput);
    } else {
      console.log("Toggle input not found");
    }
  }, [toggleInput]);

  return (
    <div id="rive-container" className="m-0 h-20 w-20 border-green-500 p-0">
      <RiveComponent
        ref={ref}
        id="rive-component"
        onMouseEnter={() => rive && rive.play()}
        onMouseLeave={() => rive && rive.pause()}
        onClick={() => toggleInput && toggleInput.fire()}
      />
    </div>
  );
}

export { Rive };

// package.json dependencies
"dependencies": {
    "@nextui-org/react": "^2.6.11",
    "@react-three/drei": "^9.120.5",
    "@react-three/fiber": "^8.17.10",
    "@rive-app/react-canvas-lite": "^4.17.5",
    "canvas-confetti": "^1.9.3",
    "motion": "^11.15.0",
    "next": "15.1.3",
    "next-themes": "^0.4.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-icons": "^5.4.0",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.172.0"
  }

Folder public: HTML: Current Rive Wrapper: console.log output:

[gabrieloureiro]

I've tried with React 18 also. Still rendering nothing

  "dependencies": {
    "@nextui-org/react": "^2.6.11",
    "@react-three/drei": "^9.120.5",
    "@react-three/fiber": "^8.17.10",
    "@rive-app/react-canvas-lite": "^4.17.5",
    "canvas-confetti": "^1.9.3",
    "motion": "^11.15.0",
    "next": "15.1.3",
    "next-themes": "^0.4.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-icons": "^5.4.0",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.172.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.2.0",
    "@next/eslint-plugin-next": "^15.1.3",
    "@types/node": "^20",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^8.19.0",
    "@typescript-eslint/parser": "^8.19.0",
    "clsx": "^2.1.1",
    "eslint": "^9.17.0",
    "eslint-config-next": "^15.1.3",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-promise": "^7.2.1",
    "eslint-plugin-react": "^7.37.3",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }

[Vlad160]

Add autoplay: true in your sandbox and it will work

const { RiveComponent: Rive } = useRive({
    src: "/riv/1_deposit.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
  });

[t0rbik]

Add autoplay: true in your sandbox and it will work

const { RiveComponent: Rive } = useRive({
    src: "/riv/1_deposit.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
  });

I can confirm this works. Do you have any reasoning? It's not actually autoplaying in this case, is it?

[Vlad160]

@t0rbik I think so. I think that the defaults for component and hook are different. Seems like component has autoplay: true and the ook doesn't