Kom i gang · 4 trin

Kom i gang

Installér pakken, render din første komponent, giv en komponent dine data, og vælg, hvordan den bevæger sig. Intet trin kræver provider eller opsætning.

1
Installér
Chorus kræver React 19.2 eller nyere. I en React Native-app er React Native en valgfri peer, og den samme pakke vælger automatisk sit native-build.
$
```
npm install @kkwaenggwari/animated-chorus
```
Intet andet at konfigurere: ingen provider, plugin eller stylesheet at tilføje.
2
Din første komponent
Render MotionNumber med en værdi fra state. Ændr state, og tallet ruller. Tryk på +1 og derefter ×10 for at se en ny plads rulle ind.
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>
  );
}
```
Forbereder eksemplet…
Skift mode til roll i indstillingerne: ændrede pladser passerer cifrene imellem.
3
Giv den dine data
Komponenter, der viser flere ting, tager et array. items er dine data, getKey returnerer en stabil nøgle (som standard item.id, eller selve elementet for strenge og tal), og renderItem tegner hvert element. Komponenten renderer og måler elementerne for 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} />;
}
```
Nøgler skal være unikke. Når arrayet ændrer sig, animeres kun de elementer, der kom ind, forlod eller flyttede sig.

Vælg, hvordan den bevæger sig

Hver komponent tager en transition: en timingkurve eller en fjeder. motionTokens tilbyder nogle forvalg, og en fjeder med duration er kalibreret til at slutte præcis dér.

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 bruger den samme import og de samme props.

Det er hele opsætningen

Resten er at vælge komponenter. Hver har en arbejdsbænk, hvor du kan justere den, før du kopierer koden.

Installér

Din første komponent

Giv den dine data

Vælg, hvordan den bevæger sig

Det er hele opsætningen