Справочник на API

Всеки експорт на @kkwaenggwari/animated-chorus с props, типове и стойности по подразбиране. Същите имена работят в уеб и в React Native.

ФилтърAPI: 17

Числа и текст

MotionNumber

Число, чиито разряди се въртят като колелца.

Prop	Тип	По подразбиране	Описание
`value`	`number \| bigint \| string`	`—`задължително	Числото или числов текст, форматиран от вас.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` мести всеки променен разряд с една стъпка; `roll` минава през цифрите между тях.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` следва промяната на големината, така че преносите се превъртат в една посока; `digit` сравнява всеки разряд поотделно.
`stagger`	`number`	`45`	Милисекунди между променените разряди, от единиците навън. Цялата вълна е ограничена във времето.
`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`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.
`onMotionComplete`	`(value) => void`		Изпълнява се със стойността, след като разрядите спрат.

Страница на компонента и работна маса

MotionText

Текст, който се анимира при промяна: числовият се превърта по разряди, а другият се сменя.

Prop	Тип	По подразбиране	Описание
`children`	`ReactNode`		Текстът за показване.
`as`	`element`	`'span'`	Елементът за рендериране.
`transition`	`Transition`	`spring`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.
`onMotionComplete`	`(text) => void`		Изпълнява се, когато движението спре.

Страница на компонента и работна маса

MotionStream

Поточен текст, който се разкрива с равномерно темпо и наваксва изблиците.

Prop	Тип	По подразбиране	Описание
`text`	`string`	`—`задължително	Текстът досега. Растящият текст се разкрива с равномерно темпо; пренаписването продължава от общото начало.
`speed`	`number`	`90`	Основна скорост на разкриване в знаци в секунда.
`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`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.
`onMotionComplete`	`(value) => void`		Изпълнява се, когато движението спре.

Страница на компонента и работна маса

MotionHeight

Анимира височината според съдържанието: свиване, разгъване и промени на съдържанието.

Prop	Тип	По подразбиране	Описание
`open`	`boolean`	`true`	`false` свива до нулева височина; съдържанието остава монтирано, но скрито и неактивно.
`children`	`ReactNode`		Съдържанието.
`as`	`element`	`'div'`	Елементът за рендериране.
`transition`	`Transition`	`spring`	Крива на timing `{ 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`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.
`onExitComplete`	`() => void`		Изпълнява се, след като съдържанието е излязло и е премахнато.

Страница на компонента и работна маса

Избор и страници

MotionHighlight

Елементи от данни с едно подчертаване, което се мести към избрания елемент.

Prop	Тип	По подразбиране	Описание
`items`	`readonly T[]`	`—`задължително	Вашият масив с данни.
`value`	`key \| null`	`—`задължително	Ключ на подчертания елемент; `null` скрива подчертаването.
`onValueChange`	`(key, item) => void`		Изпълнява се с ключа и елемента при натискане на елемент.
`getKey`	`(item) => string \| number`	`item.id`	Връща уникален стабилен ключ за елемент. По подразбиране `item.id`, а за низове и числа — самия елемент.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Рисува елемент; получава дали е избран.
`hover`	`boolean`	`false`	Следвай показалеца над елементите и се върни към `value` при излизане (уеб).
`itemAs`	`element`	`'button'`	Елементът за всяка позиция.
`itemClassName`	`string`		Клас за елемента на всяка позиция; `itemStyle` задава вградения му стил.
`highlightClassName`	`string`		Клас за подчертаването; `highlightStyle` задава вградения му стил.
`transition`	`Transition`	`spring`	Крива на timing `{ 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`	Връща уникален стабилен ключ за елемент. По подразбиране `item.id`, а за низове и числа — самия елемент.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Рисува страница; получава индекса ѝ и дали е активна.
`gap`	`number`	`0`	Разстояние между страниците в пиксели.
`itemClassName`	`string`		Клас за елемента на всяка позиция; `itemStyle` задава вградения му стил.
`transition`	`Transition`	`spring`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.

Страница на компонента и работна маса

Списъци

MotionList

Списък с ключове от данни, който анимира само промененото.

Prop	Тип	По подразбиране	Описание
`items`	`readonly T[]`	`—`задължително	Вашият масив с данни.
`getKey`	`(item) => string \| number`	`item.id`	Връща уникален стабилен ключ за елемент. По подразбиране `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`	Връща уникален ключ за елемент. По подразбиране — самия елемент.
`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`	Крива на timing `{ 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`		Изпълнява се с `false`, когато панелът бъде затворен с влачене, докосване или Escape.
`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`	Крива на timing `{ 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`	Крива на timing `{ 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`	Крива на timing `{ 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`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.

Страница на компонента и работна маса

Преходи

motionTokens

Готови стойности за всеки prop transition.

Prop	Тип	По подразбиране	Описание
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Продължителности в милисекунди.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Преходи timing с продължителност и именувана крива.
`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} />
    </>
  );
}