Kom igång · 4 steg

Kom igång

Installera paketet, rendera din första komponent, ge en komponent din data och välj hur den rör sig. Inget steg kräver provider eller setup.

1
Installera
Chorus kräver React 19.2 eller senare. I en React Native-app är React Native en valfri peer och samma paket väljer automatiskt sitt native-bygge.
$
```
npm install @kkwaenggwari/animated-chorus
```
Inget annat att konfigurera: ingen provider, plugin eller stilmall att lägga till.
2
Din första komponent
Rendera MotionNumber med ett värde från state. Ändra state så rullar siffran. Tryck på +1 och sedan ×10 för att se en ny position rulla 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>
  );
}
```
Förbereder exemplet…
Byt mode till roll i inställningarna: ändrade positioner passerar siffrorna däremellan.
3
Ge den din data
Komponenter som visar flera saker tar en array. items är din data, getKey returnerar en stabil nyckel (som standard item.id, eller själva objektet för strängar och tal), och renderItem ritar varje objekt. Komponenten renderar och mäter objektelementen åt dig.
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} />;
}
```
Nycklar måste vara unika. När arrayen ändras animeras bara objekt som kom in, lämnade eller flyttades.

Välj hur den rör sig

Varje komponent tar en transition: en timingkurva eller en fjäder. motionTokens erbjuder några förinställningar, och en fjäder med duration är kalibrerad att sluta exakt då.

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 använder samma import och samma props.

Det är hela setupen

Resten handlar om att välja komponenter. Var och en har en arbetsbänk där du kan justera den innan du kopierar koden.

Installera

Din första komponent

Ge den din data

Välj hur den rör sig

Det är hela setupen