Primii pași · 4 pași

Începeți

Instalați pachetul, randați prima componentă, dați unei componente datele dumneavoastră și alegeți cum se mișcă. În niciun pas nu există provider sau configurare.

1
Instalare
Chorus are nevoie de React 19.2 sau mai nou. Într-o aplicație React Native, React Native este un peer opțional, iar același pachet își alege automat build-ul nativ.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nimic altceva de configurat: niciun provider, plugin sau foaie de stil de adăugat.
2
Prima dumneavoastră componentă
Randați MotionNumber cu o valoare din stare. Schimbați starea și numărul se rotește. Apăsați +1, apoi ×10 ca să vedeți o cifră nouă intrând prin rotire.
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>
  );
}
```
Se pregătește exemplul…
Treceți mode pe roll în setări: cifrele schimbate trec prin cifrele intermediare.
3
Dați-i datele dumneavoastră
Componentele care afișează mai multe lucruri primesc un tablou. items sunt datele dumneavoastră, getKey returnează un key stabil (implicit item.id sau elementul însuși pentru șiruri și numere), iar renderItem desenează fiecare element. Componenta randează și măsoară elementele în locul dumneavoastră.
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} />;
}
```
Key-urile trebuie să fie unice. Când tabloul se schimbă, se animă doar elementele care au intrat, au ieșit sau s-au mutat.

Alegeți cum se mișcă

Fiecare componentă acceptă un transition: o curbă timing sau un arc. motionTokens oferă câteva presetări, iar un arc cu duration este calibrat să se încheie exact atunci.

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 folosește același import și aceleași props.

Asta e toată configurarea

Restul înseamnă alegerea componentelor. Fiecare are un banc de lucru unde o puteți ajusta înainte de a copia codul.

Instalare

Prima dumneavoastră componentă

Dați-i datele dumneavoastră

Alegeți cum se mișcă

Asta e toată configurarea