Kom i gang · 4 steg

Kom i gang

Installer pakken, render den første komponenten, gi en komponent dataene dine, og velg hvordan den beveger seg. Ingen steg krever provider eller oppsett.

1
Installer
Chorus krever React 19.2 eller nyere. I en React Native-app er React Native en valgfri peer, og den samme pakken velger native-bygget sitt automatisk.
$
```
npm install @kkwaenggwari/animated-chorus
```
Ingenting annet å konfigurere: ingen provider, plugin eller stilark å legge til.
2
Din første komponent
Render MotionNumber med en verdi fra state. Endre state, så ruller tallet. Trykk +1 og så ×10 for å se en ny plass rulle inn.
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 eksempelet …
Bytt mode til roll i innstillingene: endrede plasser går gjennom sifrene imellom.
3
Gi den dataene dine
Komponenter som viser flere ting, tar en array. items er dataene dine, getKey returnerer en stabil nøkkel (som standard item.id, eller selve elementet for strenger og tall), og renderItem tegner hvert element. Komponenten renderer og måler elementene for deg.
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økler må være unike. Når arrayen endres, animeres bare elementer som kom inn, forlot eller flyttet seg.

Velg hvordan den beveger seg

Hver komponent tar en transition: en timingkurve eller en fjær. motionTokens tilbyr noen forhåndsvalg, og en fjær med duration er kalibrert til å slutte nøyaktig da.

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 bruker samme import og samme props.

Det er hele oppsettet

Resten er å velge komponenter. Hver har en arbeidsbenk der du kan justere den før du kopierer koden.

Installer

Din første komponent

Gi den dataene dine

Velg hvordan den beveger seg

Det er hele oppsettet