Começar · 4 passos

Começar

Instale o pacote, renderize seu primeiro componente, entregue seus dados a um componente e escolha como ele se move. Em nenhum passo há provider ou configuração.

1
Instalar
O Chorus precisa do React 19.2 ou superior. Em um app React Native, o React Native é uma dependência peer opcional, e o mesmo pacote escolhe o build nativo automaticamente.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nada mais para configurar: não há provider, plugin nem folha de estilos para adicionar.
2
Seu primeiro componente
Renderize MotionNumber com um valor do estado. Mude o estado e o número rola. Aperte +1 e depois ×10 para ver uma casa nova entrar rolando.
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 o exemplo…
Mude mode para roll nas configurações: as casas que mudam passam pelos dígitos intermediários.
3
Entregue seus dados
Componentes que mostram várias coisas recebem um array. items são seus dados, getKey retorna uma key estável (por padrão item.id, ou o próprio item para strings e números) e renderItem desenha cada item. O componente renderiza e mede os elementos para você.
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} />;
}
```
As keys precisam ser únicas. Quando o array muda, só animam os itens que entraram, saíram ou se moveram.

Escolha como ele se move

Todo componente aceita uma transition: uma curva de tempo ou uma mola. motionTokens oferece alguns presets, e uma mola com duration é calibrada para terminar exatamente nesse 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>

O React Native usa o mesmo import e as mesmas props.

Essa é toda a configuração

O resto é escolher componentes. Cada um tem uma bancada onde você pode ajustá-lo antes de copiar o código.

Instalar

Seu primeiro componente

Entregue seus dados

Escolha como ele se move

Essa é toda a configuração