Početak · 4 koraka

Početak

Instalirajte paket, renderirajte prvu komponentu, dajte joj svoje podatke i odaberite kako se kreće. Ni u jednom koraku nema providera ni postavljanja.

1
Instalacija
Chorus zahtijeva React 19.2 ili noviji. U React Native aplikaciji React Native je neobavezna peer ovisnost, a isti paket automatski bira svoju nativnu izgradnju.
$
```
npm install @kkwaenggwari/animated-chorus
```
Ništa drugo za konfiguriranje: nema providera, plugina ni stilske datoteke za dodavanje.
2
Vaša prva komponenta
Renderirajte MotionNumber s vrijednošću iz stanja. Promijenite stanje i broj se zavrti. Pritisnite +1, a zatim ×10 da biste vidjeli kako se uvrti novo mjesto.
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>
  );
}
```
Priprema primjera…
U postavkama prebacite mode na roll: promijenjena mjesta prolaze kroz znamenke između.
3
Dajte joj svoje podatke
Komponente koje prikazuju više stvari primaju niz. items su vaši podaci, getKey vraća stabilan ključ (prema zadanom item.id, a za nizove znakova i brojeve samu stavku), a renderItem crta svaku stavku. Komponenta umjesto vas renderira i mjeri elemente stavki.
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} />;
}
```
Ključevi moraju biti jedinstveni. Kad se niz promijeni, animiraju se samo stavke koje su ušle, izašle ili se pomaknule.

Odaberite kako se kreće

Svaka komponenta prima transition: krivulju timinga ili oprugu. motionTokens nudi nekoliko unaprijed zadanih postavki, a opruga s duration kalibrirana je da završi točno tada.

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 koristi isti import i iste props.

To je cijelo postavljanje

Ostalo je odabir komponenti. Svaka ima radni stol na kojem je možete podesiti prije kopiranja koda.

Instalacija

Vaša prva komponenta

Dajte joj svoje podatke

Odaberite kako se kreće

To je cijelo postavljanje