Empezar · 4 pasos

Empezar

Instala el paquete, renderiza tu primer componente, dale tus datos y elige cómo se mueve. En ningún paso hay provider ni configuración.

1
Instalar
Chorus necesita React 19.2 o posterior. En una app de React Native, React Native es una dependencia peer opcional y el mismo paquete elige su build nativa automáticamente.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nada más que configurar: no hay provider, plugin ni hoja de estilos que añadir.
2
Tu primer componente
Renderiza MotionNumber con un valor del estado. Cambia el estado y el número rueda. Pulsa +1 y luego ×10 para ver cómo entra rodando una cifra nueva.
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>
  );
}
```
Preparando el ejemplo…
Cambia mode a roll en los ajustes: las cifras que cambian pasan por los dígitos intermedios.
3
Dale tus datos
Los componentes que muestran varias cosas reciben un array. items son tus datos, getKey devuelve una key estable (por defecto item.id, o el propio elemento si es una cadena o un número) y renderItem dibuja cada elemento. El componente renderiza y mide los elementos por ti.
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} />;
}
```
Las keys deben ser únicas. Cuando cambia el array, solo se animan los elementos que entraron, salieron o se movieron.

Elige cómo se mueve

Todos los componentes aceptan una transition: una curva de tiempo o un resorte. motionTokens ofrece algunos presets, y un resorte con duration se calibra para terminar exactamente en ese 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 el mismo import y las mismas props.

Esa es toda la configuración

Lo demás es elegir componentes. Cada uno tiene un banco de pruebas donde puedes ajustarlo antes de copiar el código.

Instalar

Tu primer componente

Dale tus datos

Elige cómo se mueve

Esa es toda la configuración