Lewati ke konten utama

React

Runtime React Rive adalah wrapper React di sekitar @rive-app/webgl2 (yang menggunakan WebGL2 — API browser yang memanfaatkan GPU perangkat Anda untuk grafis yang cepat dan berkualitas tinggi). Runtime ini menyediakan komponen dan hooks siap pakai (fungsi React yang memungkinkan komponen mengakses logika bersama — dalam hal ini, kontrol pemutaran Rive dan elemen canvas yang dirender) sehingga Anda dapat menambahkan animasi Rive ke aplikasi React apa pun tanpa menulis kode canvas tingkat rendah. Tipe TypeScript sudah disertakan.

GitHub: rive-app/rive-react

Memulai​

1
Pasang dependensi

Pilih paket yang sesuai dengan renderer yang Anda butuhkan:

  • @rive-app/react-webgl2 — Menggunakan Rive Renderer. Dukungan fitur penuh. (disarankan)
  • @rive-app/react-canvas — Hanya Canvas, tanpa Rive Renderer.
  • @rive-app/react-canvas-lite — Bundle terkecil, fitur terbatas.

Rive Renderer adalah mesin grafis berkualitas tinggi milik Rive sendiri. Anda mendapatkan dukungan fitur penuh, termasuk efek visual tingkat lanjut.

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

Untuk kualitas visual terbaik di Chrome, Anda dapat mengaktifkan fitur grafis opsional. Buka chrome://flags dan aktifkan WebGL Draft Extensions, lalu restart Chrome. Jika Anda melewati langkah ini, Rive tetap berfungsi — hanya saja secara otomatis menggunakan mode rendering yang sedikit kurang presisi.

2
Gunakan komponen Rive

Ekspor default adalah komponen React. Berikan prop src dan stateMachines untuk menampilkan animasi Rive.

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

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

Lihat Parameter dan Nilai Kembalian untuk semua prop yang didukung.

3
Gunakan hook useRive

Gunakan hook useRive ketika Anda membutuhkan akses langsung ke instans Rive (misalnya, untuk memanggil play, pause, atau membaca state). Hook ini mengembalikan dua hal:

  • rive — instans Rive yang Anda gunakan untuk memanggil metode API.
  • RiveComponent — komponen React yang memasang canvas ke dalam 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()}
    />
  );
}
catatan

Rive tidak akan diinisialisasi sampai <RiveComponent /> dirender, karena membutuhkan elemen <canvas> di dalam DOM.

Canvas akan mengisi containernya. Bungkus RiveComponent di dalam elemen berukuran tetap atau berikan className untuk mengontrol dimensinya.

Render Bersyarat​

Bungkus useRive di dalam komponen tersendiri ketika Anda perlu menampilkan atau menyembunyikan animasi. Ini memungkinkan React untuk melepas komponen dengan bersih dan menginisialisasinya kembali dengan benar saat dipasang ulang.

// ✅ Benar: isolasi useRive dalam wrapper
function RiveWrapper() {
  const { rive, RiveComponent } = useRive({ src: '...', stateMachines: '...' });
  return <RiveComponent />;
}

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

Lihat CodeSandbox ini untuk contoh yang berfungsi.

Sumber Daya​