Bắt đầu · 4 bước

Bắt đầu

Cài gói, render component đầu tiên, đưa dữ liệu của bạn cho component và chọn cách nó chuyển động. Không có provider hay thiết lập ở bước nào.

1
Cài đặt
Chorus cần React 19.2 trở lên. Trong ứng dụng React Native, React Native là peer tùy chọn và cùng gói đó tự chọn bản build native.
$
```
npm install @kkwaenggwari/animated-chorus
```
Không cần cấu hình gì thêm: không có provider, plugin hay stylesheet nào phải thêm.
2
Component đầu tiên của bạn
Render MotionNumber với một giá trị từ state. Đổi state và con số sẽ cuộn. Nhấn +1, rồi ×10 để xem một chữ số mới cuộn vào.
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>
  );
}
```
Đang chuẩn bị ví dụ…
Chuyển mode sang roll trong cài đặt: các chữ số thay đổi sẽ đi qua những chữ số ở giữa.
3
Đưa dữ liệu của bạn
Component hiển thị nhiều thứ sẽ nhận một mảng. items là dữ liệu của bạn, getKey trả về key ổn định (mặc định item.id, hoặc chính mục đó với chuỗi và số), và renderItem vẽ từng mục. Component render và đo các phần tử mục cho bạn.
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 phải là duy nhất. Khi mảng thay đổi, chỉ các mục vào, ra hoặc dời chỗ mới có hoạt ảnh.

Chọn cách chuyển động

Mọi component đều nhận transition: một đường cong timing hoặc lò xo. motionTokens có sẵn vài cấu hình, và lò xo có duration được hiệu chỉnh để kết thúc đúng lúc đó.

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 dùng cùng import và cùng props.

Toàn bộ thiết lập chỉ có vậy

Phần còn lại là chọn component. Mỗi cái có một bàn làm việc để bạn tinh chỉnh trước khi sao chép mã.

Cài đặt

Component đầu tiên của bạn

Đưa dữ liệu của bạn

Chọn cách chuyển động

Toàn bộ thiết lập chỉ có vậy