はじめる · 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 に切り替えると、変わった桁が途中の数字を通って回ります。
3
データを渡す
複数のものを表示するコンポーネントは配列を受け取ります。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 です。

セットアップはこれで全部です

あとはコンポーネントを選ぶだけ。どのコンポーネントにも、コードをコピーする前に調整できるワークベンチがあります。

インストール

最初のコンポーネント

データを渡す

動き方を選ぶ

セットアップはこれで全部です