開始使用 · 4 步

開始使用

安裝套件、渲染第一個元件、把你的資料交給元件，並選擇它的動態方式。任何一步都不需要 Provider 或設定。

1
安裝
Chorus 需要 React 19.2 以上版本。在 React Native 應用程式中，React Native 是選用的 peer 相依，同一個套件會自動選擇原生版本。
$
```
npm install @kkwaenggwari/animated-chorus
```
沒有其他要設定的：不需要加入 Provider、外掛或樣式表。
2
你的第一個元件
用 state 中的值渲染 MotionNumber。改變 state，數字就會滾動。先按 +1，再按 ×10，看新的位數滾進來。
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>
  );
}
```
正在準備範例…
在設定中把 mode 切換成 roll：改變的位數會經過中間的數字滾動。

交給它你的資料

顯示多個項目的元件會接收一個陣列。items 是你的資料，getKey 回傳穩定的 key（預設為 item.id，字串與數字則是它本身），renderItem 繪製每個項目。元件會替你渲染並測量各項目的元素。

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 必須唯一。陣列改變時，只有新增、移除或移動的項目才會動。

選擇動態方式

每個元件都接受 transition：時間曲線或彈簧。motionTokens 提供了幾種預設，指定了 duration 的彈簧會被校準成恰好在那一刻結束。

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 使用相同的 import 與相同的 props。

設定就這些

剩下的就是挑選元件。每個元件都有工作台，可以先調整好再複製程式碼。

安裝

你的第一個元件

交給它你的資料

選擇動態方式

設定就這些