Початок · 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.

Ось і все налаштування

Решта — вибір компонентів. Кожен має стенд, де його можна налаштувати перед копіюванням коду.

Встановлення

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

Передайте свої дані

Виберіть, як він рухається

Ось і все налаштування