Memulai · 4 langkah

Mulai

Instal paket, render komponen pertama Anda, berikan data Anda ke komponen, dan pilih cara geraknya. Tidak ada provider atau penyiapan di langkah mana pun.

1
Instal
Chorus memerlukan React 19.2 atau yang lebih baru. Di aplikasi React Native, React Native adalah peer opsional dan paket yang sama otomatis memilih build native-nya.
$
```
npm install @kkwaenggwari/animated-chorus
```
Tidak ada lagi yang perlu dikonfigurasi: tidak ada provider, plugin, atau stylesheet yang perlu ditambahkan.
2
Komponen pertama Anda
Render MotionNumber dengan nilai dari state. Ubah state-nya dan angka bergulir. Tekan +1, lalu ×10 untuk melihat digit baru bergulir masuk.
App.jsx
```
import { useState } from 'react';
import { MotionNumber } from '@kkwaenggwari/animated-chorus';

export default function App() {
  const [count, setCount] = useState(9);
  return (
    <button onClick={() => setCount(count + 1)}>
      <MotionNumber value={count} />
    </button>
  );
}
```
Menyiapkan contoh…
Ganti mode ke roll di pengaturan: digit yang berubah melewati digit di antaranya.
3
Berikan data Anda
Komponen yang menampilkan beberapa hal menerima array. items adalah data Anda, getKey mengembalikan key yang stabil (bawaan item.id, atau item itu sendiri untuk string dan angka), dan renderItem menggambar setiap item. Komponen merender dan mengukur elemen item untuk Anda.
Tabs.jsx
```
import { MotionHighlight } from '@kkwaenggwari/animated-chorus';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
];

export function Tabs({ tab, setTab }) {
  // Keys come from item.id; labels from item.label, or renderItem.
  return <MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;
}
```
Key harus unik. Saat array berubah, hanya item yang masuk, keluar, atau berpindah yang beranimasi.

Pilih cara geraknya

Setiap komponen menerima transition: kurva timing atau pegas. motionTokens menyediakan beberapa preset, dan pegas dengan duration dikalibrasi agar selesai tepat pada waktu itu.

Panel.jsx

import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';

<MotionHeight open={open} transition={motionTokens.spring.gentle}>…</MotionHeight>
<MotionHeight open={open} transition={{ duration: 300, easing: 'easeOut' }}>…</MotionHeight>
<MotionHeight open={open} transition={{ tempo: 'spring', spring: { stiffness: 300, damping: 30 }, duration: 500 }}>…</MotionHeight>

React Native memakai impor dan props yang sama.

Itu seluruh penyiapannya

Sisanya tinggal memilih komponen. Masing-masing punya meja kerja tempat Anda bisa menyesuaikannya sebelum menyalin kode.

Instal

Komponen pertama Anda

Berikan data Anda

Pilih cara geraknya

Itu seluruh penyiapannya