Aan de slag · 4 stappen

Aan de slag

Installeer het pakket, render je eerste component, geef een component je data en kies hoe het beweegt. Bij geen enkele stap is er een provider of setup nodig.

1
Installeren
Chorus vereist React 19.2 of nieuwer. In een React Native-app is React Native een optionele peer en kiest hetzelfde pakket automatisch zijn native build.
$
```
npm install @kkwaenggwari/animated-chorus
```
Verder niets in te stellen: geen provider, plugin of stylesheet om toe te voegen.
2
Je eerste component
Render MotionNumber met een waarde uit state. Verander de state en het getal rolt. Druk op +1 en dan op ×10 om een nieuw cijfer te zien binnenrollen.
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>
  );
}
```
Voorbeeld voorbereiden…
Zet mode in de instellingen op roll: gewijzigde cijfers gaan langs de tussenliggende cijfers.
3
Geef het je data
Componenten die meerdere dingen tonen, nemen een array. items is je data, getKey geeft een stabiele key terug (standaard item.id, of het item zelf bij strings en getallen), en renderItem tekent elk item. Het component rendert en meet de item-elementen voor je.
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} />;
}
```
Keys moeten uniek zijn. Als de array verandert, animeren alleen de items die binnenkwamen, vertrokken of verschoven.

Kies hoe het beweegt

Elk component accepteert een transition: een timingcurve of een veer. motionTokens biedt een paar presets, en een veer met duration is zo afgesteld dat hij precies dan eindigt.

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 gebruikt dezelfde import en dezelfde props.

Dat is de hele setup

De rest is componenten kiezen. Elk heeft een werkbank waar je hem kunt afstellen voordat je de code kopieert.

Installeren

Je eerste component

Geef het je data

Kies hoe het beweegt

Dat is de hele setup