Başlarken · 4 adım

Başlayın

Paketi kurun, ilk bileşeninizi render edin, bir bileşene verilerinizi verin ve nasıl hareket edeceğini seçin. Hiçbir adımda provider ya da kurulum yok.

1
Kurulum
Chorus React 19.2 ya da sonrasını gerektirir. Bir React Native uygulamasında React Native isteğe bağlı bir peer'dır ve aynı paket native derlemesini otomatik seçer.
$
```
npm install @kkwaenggwari/animated-chorus
```
Yapılandırılacak başka bir şey yok: eklenecek provider, eklenti ya da stil dosyası yok.
2
İlk bileşeniniz
Durumdan bir değerle MotionNumber render edin. Durumu değiştirin ve sayı döner. +1'e, sonra ×10'a basarak yeni bir basamağın dönerek girişini izleyin.
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>
  );
}
```
Örnek hazırlanıyor…
Ayarlarda mode'u roll yapın: değişen basamaklar aradaki rakamlardan geçer.
3
Verilerinizi verin
Birden çok şey gösteren bileşenler bir dizi alır. items verinizdir, getKey kararlı bir key döndürür (varsayılan item.id, dize ve sayılar için öğenin kendisi) ve renderItem her öğeyi çizer. Bileşen öğe elemanlarını sizin için render eder ve ölçer.
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} />;
}
```
Key'ler benzersiz olmalıdır. Dizi değiştiğinde yalnızca giren, çıkan ya da yer değiştiren öğeler canlanır.

Nasıl hareket edeceğini seçin

Her bileşen bir transition kabul eder: bir timing eğrisi ya da bir yay. motionTokens birkaç hazır ayar sunar ve duration içeren bir yay tam o anda bitecek şekilde ayarlanı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 aynı import'u ve aynı props'u kullanır.

Kurulumun tamamı bu

Gerisi bileşen seçmektir. Her birinin, kodu kopyalamadan önce ayarlayabileceğiniz bir tezgâhı var.

Kurulum

İlk bileşeniniz

Verilerinizi verin

Nasıl hareket edeceğini seçin

Kurulumun tamamı bu