Zacznij · 4 kroki

Zacznij

Zainstaluj pakiet, wyrenderuj pierwszy komponent, przekaż mu swoje dane i wybierz, jak się porusza. Na żadnym etapie nie ma providera ani konfiguracji.

1
Instalacja
Chorus wymaga React 19.2 lub nowszego. W aplikacji React Native sam React Native jest opcjonalną zależnością peer, a ten sam pakiet automatycznie wybiera build natywny.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nie ma nic więcej do konfiguracji: żadnego providera, pluginu ani arkusza stylów.
2
Twój pierwszy komponent
Wyrenderuj MotionNumber z wartością ze stanu. Zmień stan, a liczba się przewinie. Naciśnij +1, a potem ×10, by zobaczyć, jak wjeżdża nowa cyfra.
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>
  );
}
```
Przygotowywanie przykładu…
Przełącz mode na roll w ustawieniach: zmienione cyfry przechodzą przez cyfry pośrednie.
3
Przekaż mu swoje dane
Komponenty pokazujące kilka rzeczy przyjmują tablicę. items to twoje dane, getKey zwraca stabilny klucz (domyślnie item.id, a dla ciągów i liczb sam element), a renderItem rysuje każdy element. Komponent sam renderuje i mierzy elementy.
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} />;
}
```
Klucze muszą być unikalne. Gdy tablica się zmienia, animują się tylko elementy, które weszły, wyszły lub się przesunęły.

Wybierz, jak się porusza

Każdy komponent przyjmuje transition: krzywą timing albo sprężynę. motionTokens oferuje kilka gotowych ustawień, a sprężyna z duration jest skalibrowana, by skończyć dokładnie wtedy.

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 używa tego samego importu i tych samych props.

To cała konfiguracja

Reszta to wybór komponentów. Każdy ma stanowisko, gdzie możesz go dostroić przed skopiowaniem kodu.

Instalacja

Twój pierwszy komponent

Przekaż mu swoje dane

Wybierz, jak się porusza

To cała konfiguracja