Bien démarrer · 4 étapes

Bien démarrer

Installez le paquet, rendez votre premier composant, donnez-lui vos données et choisissez comment il bouge. Aucun provider ni aucune configuration à aucune étape.

1
Installer
Chorus nécessite React 19.2 ou une version ultérieure. Dans une application React Native, React Native est une dépendance peer facultative et le même paquet choisit automatiquement son build natif.
$
```
npm install @kkwaenggwari/animated-chorus
```
Rien d’autre à configurer : aucun provider, plugin ni feuille de style à ajouter.
2
Votre premier composant
Rendez MotionNumber avec une valeur issue de l’état. Changez l’état et le nombre défile. Appuyez sur +1, puis sur ×10 pour voir un nouveau chiffre arriver en roulant.
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éparation de l’exemple…
Passez mode à roll dans les réglages : les chiffres modifiés passent par les chiffres intermédiaires.
3
Donnez-lui vos données
Les composants qui affichent plusieurs éléments prennent un tableau. items correspond à vos données, getKey renvoie une key stable (par défaut item.id, ou l’élément lui-même pour les chaînes et les nombres), et renderItem dessine chaque élément. Le composant rend et mesure les éléments pour vous.
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} />;
}
```
Les keys doivent être uniques. Quand le tableau change, seuls les éléments ajoutés, retirés ou déplacés s’animent.

Choisissez comment il bouge

Chaque composant accepte une transition : une courbe de temps ou un ressort. motionTokens propose quelques préréglages, et un ressort doté d’une duration est calibré pour se terminer exactement à ce moment-là.

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 utilise le même import et les mêmes props.

C’est toute la configuration

Le reste consiste à choisir des composants. Chacun a un banc d’essai où vous pouvez le régler avant de copier le code.

Installer

Votre premier composant

Donnez-lui vos données

Choisissez comment il bouge

C’est toute la configuration