Начало · 4 шага

Начало

Установите пакет, отрендерите первый компонент, передайте компоненту свои данные и выберите, как он движется. Ни на одном шаге не нужны provider или настройка.

1
Установка
Chorus требует React 19.2 или новее. В приложении React Native сам React Native — необязательная peer-зависимость, и тот же пакет автоматически выбирает нативную сборку.
$
```
npm install @kkwaenggwari/animated-chorus
```
Больше ничего настраивать не нужно: никаких provider, плагинов или таблиц стилей.
2
Ваш первый компонент
Отрендерите MotionNumber со значением из состояния. Измените состояние — и число прокрутится. Нажмите +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 возвращает стабильный ключ (по умолчанию 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} />;
}
```
Ключи должны быть уникальными. Когда массив меняется, анимируются только элементы, которые вошли, ушли или переместились.
4
Выберите, как он движется
Каждый компонент принимает transition: кривую timing или пружину. 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 использует тот же импорт и те же props.

Вот и вся настройка

Остальное — выбор компонентов. У каждого есть стенд, где его можно настроить перед копированием кода.

Установка

Ваш первый компонент

Передайте свои данные

Выберите, как он движется

Вот и вся настройка