Начало · 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.

Това е цялата настройка

Останалото е избор на компоненти. Всеки има работна маса, където да го настроите, преди да копирате кода.

Инсталиране

Първият ви компонент

Дайте му данните си

Изберете как се движи

Това е цялата настройка