API リファレンス

@kkwaenggwari/animated-chorus のすべてのエクスポートと、その props、型、デフォルト値。Web でも React Native でも同じ名前で使えます。

絞り込み17 個の API

数字とテキスト

MotionNumber

桁がホイールのように回る数字。

Prop	型	デフォルト	説明
`value`	`number \| bigint \| string`	`—`必須	数値、または呼び出し側でフォーマットした数字のテキスト。
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` は変わった桁を 1 段だけ動かし、`roll` は途中の数字を通って回ります。
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` は大きさの変化に従うので繰り上がりが同じ向きに回り、`digit` は桁ごとに個別に比較します。
`stagger`	`number`	`45`	変わった桁どうしの間隔(ミリ秒)。1 の位から外側へ。波全体の長さには上限があります。
`format`	`(value) => string \| Intl.NumberFormatOptions`		表示するテキストを返す関数、または `Intl.NumberFormat` のオプション(`intl` と一緒に)。
`intl`	`boolean`	`false`	組み込みの `Intl.NumberFormat` を使います。どのランタイムでも `Intl` を必須にしないよう、デフォルトはオフです。
`locale`	`string \| string[]`		`intl` で使うロケール。
`prefix`	`string`		数字の前のテキスト。
`suffix`	`string`		数字の後のテキスト。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。
`onMotionComplete`	`(value) => void`		桁が落ち着いた後に、その値を受け取って実行されます。

コンポーネントのページとワークベンチ

MotionText

変わるとアニメーションするテキスト。数字のテキストは桁ごとに回転し、それ以外のテキストは切り替わります。

Prop	型	デフォルト	説明
`children`	`ReactNode`		表示するテキスト。
`as`	`element`	`'span'`	描画する要素。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。
`onMotionComplete`	`(text) => void`		モーションが落ち着いたときに実行されます。

コンポーネントのページとワークベンチ

MotionStream

まとめて届くストリーミングテキストを一定のペースで表示し、溜まった分にも追いつきます。

Prop	型	デフォルト	説明
`text`	`string`	`—`必須	これまでのテキスト。増えたテキストは一定のペースで表示され、書き直された場合は共通する先頭部分から続きます。
`speed`	`number`	`90`	1 秒あたりの基本の表示文字数。
`catchUp`	`number`	`900`	溜まった分は、表示を速めてこのミリ秒数ほどで見せきります。
`initial`	`boolean`	`false`	マウント時にあるテキストも順に表示します(指定しなければすぐに表示)。
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` は新しい文字をフェードインし、`none` はそのまま表示します。
`children`	`(visible: string) => ReactNode`		ペース配分されたテキストを受け取る関数。たとえば Markdown の描画に。
`as`	`element`	`'span'`	描画する要素。
`onMotionComplete`	`(text) => void`		表示が `text` に追いつくたびに実行されます。

コンポーネントのページとワークベンチ

内容とサイズ

MotionSwap

要素のサイズが変わる間、中身がクロスフェードします。

Prop	型	デフォルト	説明
`value`	`unknown`		中身の識別子。新しい値で切り替わります。プレーンテキストの子要素はそれ自体が識別子です。
`children`	`ReactNode`		中身。
`as`	`element`	`'span'`	描画する要素。
`inline`	`boolean`	`as === 'span'`	`true` は中身(ラベル、アイコン)に合わせたサイズに、`false` は親の幅いっぱいに広がって高さをアニメーションします。
`align`	`'start' \| 'center' \| 'end'`	`'center'`	サイズが変わる間の中身の位置。
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	中身の出入りのしかた: `up` は上がり、`down` は下がり、`scale` は大きくなります。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。
`onMotionComplete`	`(value) => void`		モーションが落ち着いたときに実行されます。

コンポーネントのページとワークベンチ

MotionHeight

高さを中身に合わせてアニメーションします。折りたたみ、展開、内容の変化。

Prop	型	デフォルト	説明
`open`	`boolean`	`true`	`false` で高さ 0 まで折りたたみます。中身はマウントされたまま非表示・操作不可になります。
`children`	`ReactNode`		中身。
`as`	`element`	`'div'`	描画する要素。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。
`onMotionComplete`	`(open) => void`		高さが落ち着いた後に、`open` を受け取って実行されます。

コンポーネントのページとワークベンチ

MotionPresence

出入りのアニメーション中も中身をマウントしたままにします。

Prop	型	デフォルト	説明
`present`	`boolean`	`—`必須	中身を表示するか隠すか。アンマウントする代わりにこれを変えます。
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	静止しているときのポーズ。
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	中身が退場するとき、そして登場するときのポーズ。
`as`	`element`	`'div'`	描画する要素。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。
`onExitComplete`	`() => void`		中身が退場して取り除かれた後に実行されます。

コンポーネントのページとワークベンチ

選択とページ送り

MotionHighlight

データから作る項目と、選択した項目へ移動するひとつのハイライト。

Prop	型	デフォルト	説明
`items`	`readonly T[]`	`—`必須	データの配列。
`value`	`key \| null`	`—`必須	ハイライトする項目の key。`null` でハイライトを隠します。
`onValueChange`	`(key, item) => void`		項目が押されたときに、key と項目を受け取って実行されます。
`getKey`	`(item) => string \| number`	`item.id`	項目の一意で安定した key を返します。デフォルトは `item.id`、文字列や数値なら項目そのものです。
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	項目を描画します。選択されているかどうかを受け取ります。
`hover`	`boolean`	`false`	ポインターを追って項目の上を移動し、離れると `value` へ戻ります(Web)。
`itemAs`	`element`	`'button'`	各項目の要素。
`itemClassName`	`string`		各項目の要素のクラス。インラインスタイルは `itemStyle` で指定します。
`highlightClassName`	`string`		ハイライトのクラス。インラインスタイルは `highlightStyle` で指定します。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。

コンポーネントのページとワークベンチ

MotionPager

データから作るスワイプできるページ。

Prop	型	デフォルト	説明
`items`	`readonly T[]`	`—`必須	データの配列。
`index`	`number`		表示するページ。省略するとページャーが自分で管理します。
`defaultIndex`	`number`	`0`	`index` を制御しないときの最初のページ。
`onIndexChange`	`(index, item) => void`		スワイプ、キー、ホイールの操作でページが落ち着くとすぐに、インデックスと項目を受け取って実行されます。
`getKey`	`(item) => string \| number`	`item.id`	項目の一意で安定した key を返します。デフォルトは `item.id`、文字列や数値なら項目そのものです。
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	ページを描画します。インデックスと、表示中かどうかを受け取ります。
`gap`	`number`	`0`	ページ間の間隔(ピクセル)。
`itemClassName`	`string`		各項目の要素のクラス。インラインスタイルは `itemStyle` で指定します。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。

コンポーネントのページとワークベンチ

Prop	型	デフォルト	説明
`items`	`readonly T[]`	`—`必須	データの配列。
`getKey`	`(item) => string \| number`	`item.id`	項目の一意で安定した key を返します。デフォルトは `item.id`、文字列や数値なら項目そのものです。
`renderItem`	`(item, index) => ReactNode`	`item.label`	項目を描画します。
`as`	`element`	`'div'`	描画する要素。
`itemAs`	`element`	`'li' \| 'div'`	各項目の要素。
`itemClassName`	`string`		各項目の要素のクラス。インラインスタイルは `itemStyle` で指定します。
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	項目の出入りのしかた。
`distance`	`number`	`16`	`rise` と `slide` の移動距離(ピクセル)。
`stagger`	`number`	`40`	登場する項目どうしの間隔(ミリ秒)。
`order`	`'forward' \| 'reverse'`	`'forward'`	時間差の向き。
`present`	`boolean`	`true`	`false` はレイアウトを保ったまますべての項目を退場させ、`true` で戻します。
`initial`	`boolean`	`true`	リストのマウント時に登場を再生します。
`playKey`	`string \| number`		変えると登場をもう一度再生します。
`transition`	`Transition`	`spring`	登場・退場する項目のトランジション。
`layoutTransition`	`Transition`	`spring`	新しい位置へ移動する項目のトランジション。

コンポーネントのページとワークベンチ

MotionReorder

ドラッグでリストやグリッドを並べ替え。キーボードでも移動できます。

Prop	型	デフォルト	説明
`items`	`readonly T[]`		並び順を制御する場合の項目。
`defaultItems`	`readonly T[]`	`[]`	並び順をコンポーネントに任せる場合の最初の項目。
`onItemsChange`	`(items, { reason, key }) => void`		新しい並び順と、それがドラッグ、ドロップ、キーボードのどれによるものかを受け取って実行されます。
`getKey`	`(item) => string \| number`	`item`	項目の一意な key を返します。デフォルトは項目そのものです。
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	項目を描画します。インデックスと、ドラッグ中かどうかを受け取ります。
`reorder`	`'live' \| 'drop'`	`'live'`	`live` はドラッグ中にほかの項目を動かし、`drop` はドロップを待ちます。
`layout`	`'list' \| 'grid'`	`'grid'`	`list` または `grid`。
`columns`	`number`	`3`	グリッドの列数。
`gap`	`number`	`12`	項目間の間隔(ピクセル)。
`disabled`	`boolean`	`false`	ドラッグを無効にします。
`duration`	`number`	`260`	ほかの項目がよけて動くときの時間(ミリ秒)。
`itemClassName`	`string`		各項目の要素のクラス。インラインスタイルは `itemStyle` で指定します。

コンポーネントのページとワークベンチ

ジェスチャー

MotionSwipe

横にスワイプするとアクションが現れ、払って消すこともできる行。

Prop	型	デフォルト	説明
`children`	`ReactNode`		行の中身。
`startActions`	`ReactNode`		行を終わり側へドラッグしたとき、始まり側に現れます。
`endActions`	`ReactNode`		行を始まり側へドラッグしたとき、終わり側に現れます。
`dismiss`	`'start' \| 'end' \| 'both'`		大きくスワイプするか投げるように払うと行が消える側。
`onDismiss`	`(side) => void`		行がスライドして出ていき、縮んだ後に実行されます。ここでデータから項目を削除してください。
`onOpenChange`	`(side \| null) => void`		開いた側を受け取って実行されます。行が閉じると `null` です。
`disabled`	`boolean`	`false`	スワイプを無効にします。
`contentClassName`	`string`		行の中身のクラス。インラインスタイルは `contentStyle` で指定します。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。

コンポーネントのページとワークベンチ

MotionHold

長押しで確定。途中で離すと巻き戻ります。

Prop	型	デフォルト	説明
`children`	`ReactNode`		ボタンのラベル。
`onConfirm`	`() => void`		長押しが完了したときに実行されます。
`duration`	`number`	`1200`	押し続ける必要がある時間(ミリ秒)。
`disabled`	`boolean`	`false`	ボタンを無効にします。
`fillClassName`	`string`		広がっていく塗りのクラス。インラインスタイルは `fillStyle` で指定します。

コンポーネントのページとワークベンチ

オーバーレイ

MotionSheet

段階付きのボトムシート、トップシート、サイドドロワー。

Prop	型	デフォルト	説明
`open`	`boolean`	`false`	シートを表示するかどうか。
`onOpenChange`	`(open) => void`		シートがドラッグ、タップ、Escape で閉じられたときに `false` を受け取って実行されます。
`detents`	`(number \| 'content')[]`	`['content']`	止まる位置のサイズ: 画面に対する割合、ピクセル、または `'content'`。
`detent`	`number`		制御する段階のインデックス。
`defaultDetent`	`number`	`0`	`detent` を指定せずに開くときに使う段階のインデックス。
`onDetentChange`	`(index) => void`		シートが落ち着いた段階のインデックスを受け取って実行されます。
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	シートが出てくる辺。
`modal`	`boolean`	`true`	背景を追加し、フォーカスを内側に閉じ込め、ページを操作不可にします。
`dismissible`	`boolean`	`true`	いちばん小さな段階を越えるドラッグ、背景、Escape で閉じられます。
`backdropClassName`	`string`		背景のクラス。インラインスタイルは `backdropStyle` で指定します。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。

コンポーネントのページとワークベンチ

MotionZoom

画像がその場から画面いっぱいに拡大します。

Prop	型	デフォルト	説明
`src`	`string`		その場に表示する画像。
`zoomSrc`	`string`		読み込みが終わると表示される大きな画像。縦横比は同じにしてください。
`margin`	`number`	`24`	拡大した画像のまわりに残す余白(ピクセル)。
`disabled`	`boolean`	`false`	拡大を無効にします。
`onZoomChange`	`(zoomed) => void`		拡大したときに `true`、閉じたときに `false` を受け取って実行されます。
`backdropStyle`	`CSSProperties`		背景のインラインスタイル。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。

コンポーネントのページとワークベンチ

進捗

ProgressBar

終わりの見えない状態にも対応した、制御された進捗バー。

Prop	型	デフォルト	説明
`value`	`number \| null`		`0` から `max` までの進捗。`null` は終わりの見えない状態です。
`max`	`number`	`100`	完了を表す値。
`color`	`string`	`'currentColor'`	塗りの色。
`trackColor`	`string`	`'#e7ece9'`	トラックの色。
`thickness`	`number`	`8`	線の太さ(ピクセル)。
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	左から(`ltr`)または右から(`rtl`)満たします。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。

コンポーネントのページとワークベンチ

ProgressRing

終わりの見えない状態にも対応した、制御された進捗リング。

Prop	型	デフォルト	説明
`value`	`number \| null`		`0` から `max` までの進捗。`null` は終わりの見えない状態です。
`max`	`number`	`100`	完了を表す値。
`size`	`number`	`96`	直径(ピクセル)。
`thickness`	`number`	`8`	リングの太さ(ピクセル)。
`color`	`string`	`'currentColor'`	弧の色。
`trackColor`	`string`	`'#e7ece9'`	トラックの色。
`children`	`ReactNode`		中央に表示するラベル。
`transition`	`Transition`	`spring`	タイミングカーブ `{ duration, easing }` かスプリング `{ tempo: 'spring', spring }`。スプリングは中断されても勢いを保ちます。

コンポーネントのページとワークベンチ

トランジション

motionTokens

どの transition prop にも使える、用意された値。

Prop	型	デフォルト	説明
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	長さ(ミリ秒)。
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	長さと名前付きのカーブを持つタイミングのトランジション。
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	すばやく硬いものから、やわらかく弾むものまでのスプリングのトランジション。

トランジション

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}