Get started · 4 steps

Get started

Install the package, render your first component, give a component your data and choose how it moves. There is no provider or setup at any step.

1
Install
Chorus needs React 19.2 or later. In a React Native app, React Native is an optional peer and the same package selects its native build automatically.
$
```
npm install @kkwaenggwari/animated-chorus
```
Nothing else to configure: there is no provider, plugin or stylesheet to add.
2
Your first component
Render MotionNumber with a value from state. Change the state and the number rolls. Press +1, then ×10 to watch a new place roll in.
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>
  );
}
```
Preparing the example…
Switch mode to roll in the settings: changed places pass through the digits in between.

Give it your data

Components that show several things take an array. items is your data, getKey returns a stable key (by default item.id, or the item itself for strings and numbers), and renderItem draws each item. The component renders and measures the item elements for you.

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 must be unique. When the array changes, only the items that entered, left or moved animate.

Choose how it moves

Every component accepts a transition: a timing curve or a spring. motionTokens offers a few presets, and a spring with duration is calibrated to end exactly then.

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 uses the same import and the same props.

That is the whole setup

Everything else is choosing components. Each one has a workbench where you can tune it before copying the code.

Install

Your first component

Give it your data

Choose how it moves

That is the whole setup