Inizia · 4 passi

Inizia

Installa il pacchetto, renderizza il tuo primo componente, dagli i tuoi dati e scegli come si muove. In nessun passo servono provider o configurazione.

1
Installa
Chorus richiede React 19.2 o successivo. In un’app React Native, React Native è una peer dependency facoltativa e lo stesso pacchetto sceglie in automatico la build nativa.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nient’altro da configurare: nessun provider, plugin o foglio di stile da aggiungere.
2
Il tuo primo componente
Renderizza MotionNumber con un valore preso dallo stato. Cambia lo stato e il numero scorre. Premi +1, poi ×10 per veder entrare una nuova cifra.
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>
  );
}
```
Preparazione dell’esempio…
Imposta mode su roll nelle impostazioni: le cifre cambiate passano per i numeri intermedi.
3
Dagli i tuoi dati
I componenti che mostrano più cose prendono un array. items sono i tuoi dati, getKey restituisce una key stabile (di default item.id, oppure l’elemento stesso per stringhe e numeri) e renderItem disegna ogni elemento. Il componente renderizza e misura gli elementi al posto tuo.
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} />;
}
```
Le key devono essere uniche. Quando l’array cambia, si animano solo gli elementi entrati, usciti o spostati.

Scegli come si muove

Ogni componente accetta una transition: una curva di timing o una molla. motionTokens offre alcuni preset, e una molla con duration è calibrata per finire esattamente in quel momento.

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 usa lo stesso import e le stesse props.

Questa è tutta la configurazione

Il resto è scegliere i componenti. Ognuno ha un banco di prova dove puoi regolarlo prima di copiare il codice.

Installa

Il tuo primo componente

Dagli i tuoi dati

Scegli come si muove

Questa è tutta la configurazione