Začíname · 4 kroky

Začíname

Nainštalujte balík, vyrenderujte prvý komponent, dajte mu svoje údaje a zvoľte, ako sa pohybuje. V žiadnom kroku netreba provider ani nastavenie.

1
Inštalácia
Chorus vyžaduje React 19.2 alebo novší. V aplikácii React Native je React Native voliteľnou peer závislosťou a rovnaký balík automaticky vyberie svoje natívne zostavenie.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nič ďalšie na nastavenie: žiadny provider, plugin ani štýl na pridanie.
2
Váš prvý komponent
Vyrenderujte MotionNumber s hodnotou zo stavu. Zmeňte stav a číslo sa pretočí. Stlačte +1 a potom ×10 a uvidíte, ako sa vroluje nový rád.
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>
  );
}
```
Príprava príkladu…
V nastaveniach prepnite mode na roll: zmenené rády prejdú číslicami medzi nimi.
3
Dajte mu svoje údaje
Komponenty, ktoré zobrazujú viac vecí, prijímajú pole. items sú vaše údaje, getKey vracia stabilný kľúč (predvolene item.id, pri reťazcoch a číslach samotnú položku) a renderItem vykreslí každú položku. Komponent prvky položiek renderuje a meria za vás.
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} />;
}
```
Kľúče musia byť jedinečné. Keď sa pole zmení, animujú sa len položky, ktoré pribudli, odišli alebo sa presunuli.

Zvoľte, ako sa pohybuje

Každý komponent prijíma transition: krivku timing alebo pružinu. motionTokens ponúka niekoľko predvolieb a pružina s duration je kalibrovaná tak, aby skončila presne vtedy.

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 používa rovnaký import aj rovnaké props.

To je celé nastavenie

Zvyšok je výber komponentov. Každý má pracovný stôl, kde ho môžete doladiť skôr, ako skopírujete kód.

Inštalácia

Váš prvý komponent

Dajte mu svoje údaje

Zvoľte, ako sa pohybuje

To je celé nastavenie