Začínáme · 4 kroky

Začínáme

Nainstalujte balíček, vyrenderujte první komponentu, dejte jí svá data a zvolte, jak se pohybuje. V žádném kroku není potřeba provider ani nastavení.

1
Instalace
Chorus vyžaduje React 19.2 nebo novější. V aplikaci React Native je React Native volitelnou peer závislostí a stejný balíček automaticky vybere své nativní sestavení.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nic dalšího k nastavení: žádný provider, plugin ani styl k přidání.
2
Vaše první komponenta
Vyrenderujte MotionNumber s hodnotou ze stavu. Změňte stav a číslo se protočí. Stiskněte +1 a pak ×10 a uvidíte, jak se vroluje nový řá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>
  );
}
```
Příprava příkladu…
V nastavení přepněte mode na roll: změněné řády projdou číslicemi mezi.
3
Dejte jí svá data
Komponenty, které zobrazují více věcí, přijímají pole. items jsou vaše data, getKey vrací stabilní klíč (ve výchozím stavu item.id, u řetězců a čísel samotnou položku) a renderItem vykreslí každou položku. Komponenta prvky položek renderuje a měří 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} />;
}
```
Klíče musí být jedinečné. Když se pole změní, animují se jen položky, které přibyly, odešly nebo se přesunuly.

Zvolte, jak se pohybuje

Každá komponenta přijímá transition: křivku timing nebo pružinu. motionTokens nabízí několik předvoleb a pružina s duration je kalibrovaná tak, aby skončila přesně tehdy.

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žívá stejný import i stejné props.

To je celé nastavení

Zbytek je výběr komponent. Každá má pracovní stůl, kde ji můžete doladit, než zkopírujete kód.

Instalace

Vaše první komponenta

Dejte jí svá data

Zvolte, jak se pohybuje

To je celé nastavení