Справочник API

Все экспорты @kkwaenggwari/animated-chorus с props, типами и значениями по умолчанию. Те же имена работают в вебе и React Native.

ФильтрAPI: 17

Числа и текст

MotionNumber

Число, разряды которого крутятся как колёсики.

Проп	Тип	По умолчанию	Описание
`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

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

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

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

MotionStream

Потоковый текст, раскрываемый в ровном темпе, который догоняет всплески.

Проп	Тип	По умолчанию	Описание
`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

Содержимое, которое плавно сменяется, пока элемент меняет размер.

Проп	Тип	По умолчанию	Описание
`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

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

Проп	Тип	По умолчанию	Описание
`open`	`boolean`	`true`	`false` сворачивает до нулевой высоты; содержимое остаётся смонтированным, но скрытым и неактивным.
`children`	`ReactNode`		Содержимое.
`as`	`element`	`'div'`	Элемент для рендера.
`transition`	`Transition`	`spring`	Кривая timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. При прерывании пружины сохраняют инерцию.
`onMotionComplete`	`(open) => void`		Выполняется с `open`, когда высота остановилась.

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

MotionPresence

Держит содержимое смонтированным, пока оно анимированно появляется и уходит.

Проп	Тип	По умолчанию	Описание
`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

Элементы из данных с одной подсветкой, которая перемещается к выбранному элементу.

Проп	Тип	По умолчанию	Описание
`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

Листаемые страницы из данных.

Проп	Тип	По умолчанию	Описание
`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

Список с ключами из данных, который анимирует только изменившееся.

Проп	Тип	По умолчанию	Описание
`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

Перестановка списка или сетки перетаскиванием, с перемещением с клавиатуры.

Проп	Тип	По умолчанию	Описание
`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

Строка, которая открывает действия горизонтальным свайпом и может быть смахнута.

Проп	Тип	По умолчанию	Описание
`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

Нажмите и удерживайте для подтверждения; раннее отпускание откатывает назад.

Проп	Тип	По умолчанию	Описание
`children`	`ReactNode`		Подпись кнопки.
`onConfirm`	`() => void`		Выполняется, когда удержание завершено.
`duration`	`number`	`1200`	Сколько миллисекунд нужно удерживать нажатие.
`disabled`	`boolean`	`false`	Отключает кнопку.
`fillClassName`	`string`		Класс для растущей заливки; `fillStyle` задаёт её встроенный стиль.

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

Оверлеи

MotionSheet

Нижняя или верхняя шторка либо боковая панель с точками остановки.

Проп	Тип	По умолчанию	Описание
`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

Изображение, которое увеличивается со своего места до заполнения экрана.

Проп	Тип	По умолчанию	Описание
`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

Управляемая линия прогресса с неопределённым состоянием.

Проп	Тип	По умолчанию	Описание
`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

Управляемое кольцо прогресса с неопределённым состоянием.

Проп	Тип	По умолчанию	Описание
`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

Готовые значения для любого пропа transition.

Проп	Тип	По умолчанию	Описание
`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} />
    </>
  );
}