React / Next.js

Ugyanaz a .riv fájl, ugyanaz az artboard, state machine, input és esemény, mint a Vanilla Web receptben. Csak a wrapper kód más.

Akkor használd, ha

React appot fejlesztesz (CRA, Vite, Remix, Gatsby) vagy Next.js appot.

Mire lesz szükséged

• A .riv fájl egy URL-en vagy a public/-ban.
• A state machine neve a handoff.md-ből.
• React 18 vagy újabb.

Telepítés

npm install @rive-app/react-webgl2

Másold be ezt

"use client"; // csak Next.js App Routerhez

import { useRive, Layout, Fit, Alignment } from "@rive-app/react-webgl2";

export function LupianHero() {
  const { RiveComponent } = useRive({
    src: "/animations/hero.riv",          // a handoff-ból
    stateMachines: "State Machine 1",     // a handoff.md-ből
    autoplay: true,
    layout: new Layout({
      fit: Fit.Contain,
      alignment: Alignment.Center,
    }),
  });

  return (
    <div style={{ width: "100%", aspectRatio: "16 / 9" }}>
      <RiveComponent style={{ width: "100%", height: "100%" }} />
    </div>
  );
}

A useRive intézi a canvas létrehozását, a méretezést és a takarítást. Nem kell külön meghívnod a resizeDrawingSurfaceToCanvas()-t vagy a cleanup()-ot.

SSR / Next.js figyelmeztetés

A Rive csak böngészőben fut

A Rive runtime-nak window, document, WebGL és WASM kell. Szerveren nem rendereldhető.

• App Router: tedd a fájl tetejére, hogy "use client".
• Pages Router vagy bármilyen SSR: dinamikus importtal, SSR letiltva:

  import dynamic from "next/dynamic";
  const LupianHero = dynamic(() => import("./LupianHero"), { ssr: false });

Inputok és események bekötése

Ugyanazok a nevek, mint Vanilla Webben — a useStateMachineInput a React-barát accessor.

import {
  useRive,
  useStateMachineInput,
} from "@rive-app/react-webgl2";

export function InteractiveButton() {
  const { rive, RiveComponent } = useRive({
    src: "/animations/button.riv",
    stateMachines: "Button SM",
    autoplay: true,
  });

  const isHover  = useStateMachineInput(rive, "Button SM", "isHovering");
  const onClick  = useStateMachineInput(rive, "Button SM", "onClick");

  return (
    <RiveComponent
      style={{ width: 200, height: 60 }}
      onMouseEnter={() => isHover && (isHover.value = true)}
      onMouseLeave={() => isHover && (isHover.value = false)}
      onClick={() => onClick?.fire()}
    />
  );
}

Esemény-figyelésre (az animáció által küldött egyedi események) lásd: State machine inputok & események.

A „nevek egyeznek” szabály

A .riv fájlt nem érdekli, milyen runtime-mal töltöd be. A handoff.md-ben szereplő nevek — artboard, state machine, inputok, események — azonosak Vanilla Web, React és Framer alatt. Ha később wrappert váltasz, a nevek maradnak; csak a köré írt kód cserélődik.

Több animáció egy oldalon

A böngészők korlátozzák a WebGL kontextusok számát (8–16). Minden példányon kapcsold be az offscreen renderert:

useRive({
  src: "/animations/card.riv",
  stateMachines: "Idle",
  autoplay: true,
  useOffscreenRenderer: true,
});

Részletek: Több animáció egy oldalon.

Gyakori hibák

• Elmarad a "use client" (Next.js App Router) — hidrációs vagy import hiba a buildnél.
• A React csomagot szerverkomponens tetején importálod — ugyanez a javítás.
• A @rive-app/react-et használod (Canvas2D wrapper), pedig a handoff.md olyan funkciót kér, ami csak WebGL2 alatt megy (mesh, vektoros tollazás, fejlettebb blend módok).
• A rive-ot azelőtt olvasod, mielőtt készen lenne. A useRive-ból visszakapott rive az első renderben null — effecten belül védd egy if (!rive) return;-gel.
• Ugyanazt az inputot újrahasználod a következő mountnál. Ha a .riv cserélődik, mountold újra a komponenst, hogy a useStateMachineInput újra kötődjön.
• Nincs aspectRatio a konténeren. A canvasnek méretezett szülő kell — különben 0×0 méretben jelenik meg.

Ha elakadsz, ezt küldd a Lupiannak

• A repót vagy egy minimális reprodukciót (CodeSandbox / StackBlitz is jó).
• A keretrendszert (Next.js App Router / Pages Router / Vite stb.) és a React verziót.
• Konzol- és Network-tab képeket.
• A teljes lista: Kérj segítséget a Lupiantól.

Kapcsolódó

• Vanilla Web recept
• State machine inputok & események
• Több animáció egy oldalon
• Részletes API referencia: rive.app/docs