Loslegen · 4 Schritte

Loslegen

Installiere das Paket, rendere deine erste Komponente, gib einer Komponente deine Daten und wähle, wie sie sich bewegt. In keinem Schritt gibt es einen Provider oder ein Setup.

1
Installieren
Chorus braucht React 19.2 oder neuer. In einer React-Native-App ist React Native eine optionale Peer-Abhängigkeit, und dasselbe Paket wählt automatisch seinen nativen Build.
$
```
npm install @kkwaenggwari/animated-chorus
```
Sonst ist nichts zu konfigurieren: kein Provider, kein Plugin, kein Stylesheet.
2
Deine erste Komponente
Rendere MotionNumber mit einem Wert aus dem State. Ändere den State, und die Zahl rollt. Drück +1 und dann ×10, um eine neue Stelle hereinrollen zu sehen.
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>
  );
}
```
Beispiel wird vorbereitet…
Stell mode in den Einstellungen auf roll: Geänderte Stellen laufen durch die Ziffern dazwischen.
3
Gib ihr deine Daten
Komponenten, die mehrere Dinge zeigen, nehmen ein Array. items sind deine Daten, getKey gibt einen stabilen Key zurück (standardmäßig item.id oder bei Strings und Zahlen das Element selbst), und renderItem zeichnet jedes Element. Die Komponente rendert und misst die Elemente für dich.
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 müssen eindeutig sein. Ändert sich das Array, animieren nur die Elemente, die hinzugekommen, verschwunden oder verschoben sind.

Wähle, wie es sich bewegt

Jede Komponente akzeptiert eine transition: eine Timing-Kurve oder eine Feder. motionTokens bietet ein paar Presets, und eine Feder mit duration wird so kalibriert, dass sie genau dann endet.

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 nutzt denselben Import und dieselben props.

Das ist das ganze Setup

Der Rest ist, Komponenten auszuwählen. Jede hat eine Werkbank, auf der du sie einstellen kannst, bevor du den Code kopierst.

Installieren

Deine erste Komponente

Gib ihr deine Daten

Wähle, wie es sich bewegt

Das ist das ganze Setup