API başvurusu

@kkwaenggwari/animated-chorus'un her export'u; props, tip ve varsayılanlarıyla. Aynı adlar web'de ve React Native'de çalışır.

Filtre17 API

Sayılar ve metin

MotionNumber

Basamakları tekerlek gibi dönen bir sayı.

Prop	Tip	Varsayılan	Açıklama
`value`	`number \| bigint \| string`	`—`zorunlu	Sayı ya da çağıranın biçimlendirdiği sayısal metin.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` değişen her basamağı bir adım taşır; `roll` aradaki rakamlardan geçer.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` boyuttaki değişikliği izler, eldeler tek yönde döner; `digit` her basamağı kendi içinde karşılaştırır.
`stagger`	`number`	`45`	Değişen basamaklar arasındaki milisaniye, birler basamağından dışa doğru. Dalganın tamamı sınırlıdır.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Gösterilecek metni döndüren bir fonksiyon ya da `Intl.NumberFormat` seçenekleri (`intl` ile).
`intl`	`boolean`	`false`	Yerleşik `Intl.NumberFormat`'ı kullanır. Hiçbir çalışma zamanının `Intl` gerektirmemesi için varsayılan olarak kapalıdır.
`locale`	`string \| string[]`		`intl` için yerel ayar.
`prefix`	`string`		Sayıdan önceki metin.
`suffix`	`string`		Sayıdan sonraki metin.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onMotionComplete`	`(value) => void`		Basamaklar yerleşince değerle çalışır.

Bileşen sayfası ve tezgâh

MotionText

Değiştiğinde canlanan metin: sayısal metin basamak basamak döner, diğer metin değiş tokuş edilir.

Prop	Tip	Varsayılan	Açıklama
`children`	`ReactNode`		Gösterilecek metin.
`as`	`element`	`'span'`	Render edilecek öğe.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onMotionComplete`	`(text) => void`		Hareket yerleşince çalışır.

Bileşen sayfası ve tezgâh

MotionStream

Patlamalara yetişen, sabit bir hızla gösterilen akan metin.

Prop	Tip	Varsayılan	Açıklama
`text`	`string`	`—`zorunlu	Şimdiye kadarki metin. Büyüyen metin sabit hızla gösterilir; yeniden yazım ortak başlangıçtan devam eder.
`speed`	`number`	`90`	Saniyedeki karakter cinsinden temel gösterim hızı.
`catchUp`	`number`	`900`	Birikme, hızlanarak yaklaşık bu kadar milisaniyede gösterilir.
`initial`	`boolean`	`false`	Bağlanırken var olan metni de kademeli göster (aksi hâlde hemen görünür).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` yeni karakterleri belirterek getirir; `none` doğrudan gösterir.
`children`	`(visible: string) => ReactNode`		Hızı ayarlanmış metni alan bir fonksiyon; örneğin Markdown render etmek için.
`as`	`element`	`'span'`	Render edilecek öğe.
`onMotionComplete`	`(text) => void`		Gösterim `text`'e her yetiştiğinde çalışır.

Bileşen sayfası ve tezgâh

İçerik ve boyut

MotionSwap

Öğe yeniden boyutlanırken çapraz geçişle değişen içerik.

Prop	Tip	Varsayılan	Açıklama
`value`	`unknown`		İçeriğin kimliği; yeni bir değer değişimi tetikler. Düz metin çocuklar kendi kimlikleridir.
`children`	`ReactNode`		İçerik.
`as`	`element`	`'span'`	Render edilecek öğe.
`inline`	`boolean`	`as === 'span'`	`true` içeriğe göre boyutlanır (etiketler, simgeler); `false` üst öğenin genişliğini doldurur ve yüksekliği canlandırır.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Boyut değişirken içeriğin konumu.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	İçeriğin nasıl girip çıktığı: `up` yükselir, `down` düşer, `scale` büyür.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onMotionComplete`	`(value) => void`		Hareket yerleşince çalışır.

Bileşen sayfası ve tezgâh

MotionHeight

Yüksekliği içeriğe göre canlandırır: daralma, genişleme ve içerik değişiklikleri.

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	`true`	`false` sıfır yüksekliğe daraltır; içerik bağlı ama gizli ve etkisiz kalır.
`children`	`ReactNode`		İçerik.
`as`	`element`	`'div'`	Render edilecek öğe.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onMotionComplete`	`(open) => void`		Yükseklik yerleşince `open` ile çalışır.

Bileşen sayfası ve tezgâh

MotionPresence

İçeriği girip çıkarken bağlı tutar.

Prop	Tip	Varsayılan	Açıklama
`present`	`boolean`	`—`zorunlu	İçeriği gösterir ya da gizler. Ayırmak yerine bunu değiştirin.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Durgun hâldeki pose.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	İçeriğin ayrılırken aldığı ve girerken başladığı pose.
`as`	`element`	`'div'`	Render edilecek öğe.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onExitComplete`	`() => void`		İçerik ayrılıp kaldırıldıktan sonra çalışır.

Bileşen sayfası ve tezgâh

Seçim ve sayfalama

MotionHighlight

Seçili öğeye doğru ilerleyen tek bir vurguyla veriden gelen öğeler.

Prop	Tip	Varsayılan	Açıklama
`items`	`readonly T[]`	`—`zorunlu	Veri diziniz.
`value`	`key \| null`	`—`zorunlu	Vurgulanan öğenin key'i; `null` vurguyu gizler.
`onValueChange`	`(key, item) => void`		Bir öğeye basıldığında key ve öğeyle çalışır.
`getKey`	`(item) => string \| number`	`item.id`	Bir öğe için benzersiz, kararlı bir key döndürür. Varsayılan `item.id`, dize ve sayılar için öğenin kendisidir.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Bir öğeyi çizer; seçili olup olmadığını alır.
`hover`	`boolean`	`false`	Öğelerin üzerinde işaretçiyi izler ve ayrılınca `value`'ya döner (web).
`itemAs`	`element`	`'button'`	Her öğenin elemanı.
`itemClassName`	`string`		Her öğe elemanı için class; `itemStyle` satır içi stilini ayarlar.
`highlightClassName`	`string`		Vurgu için class; `highlightStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Bileşen sayfası ve tezgâh

MotionPager

Veriden kaydırılabilir sayfalar.

Prop	Tip	Varsayılan	Açıklama
`items`	`readonly T[]`	`—`zorunlu	Veri diziniz.
`index`	`number`		Gösterilen sayfa. Sayfa çeviricinin kendi sayfasını tutması için boş bırakın.
`defaultIndex`	`number`	`0`	`index` denetimli değilken başlangıç sayfası.
`onIndexChange`	`(index, item) => void`		Bir kaydırma, tuş ya da tekerlek hareketi yerleşir yerleşmez index ve öğeyle çalışır.
`getKey`	`(item) => string \| number`	`item.id`	Bir öğe için benzersiz, kararlı bir key döndürür. Varsayılan `item.id`, dize ve sayılar için öğenin kendisidir.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Bir sayfayı çizer; index'ini ve etkin olup olmadığını alır.
`gap`	`number`	`0`	Sayfalar arasındaki boşluk, piksel.
`itemClassName`	`string`		Her öğe elemanı için class; `itemStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Bileşen sayfası ve tezgâh

Listeler

MotionList

Veriden, yalnızca değişeni canlandıran key'li bir liste.

Prop	Tip	Varsayılan	Açıklama
`items`	`readonly T[]`	`—`zorunlu	Veri diziniz.
`getKey`	`(item) => string \| number`	`item.id`	Bir öğe için benzersiz, kararlı bir key döndürür. Varsayılan `item.id`, dize ve sayılar için öğenin kendisidir.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Bir öğeyi çizer.
`as`	`element`	`'div'`	Render edilecek öğe.
`itemAs`	`element`	`'li' \| 'div'`	Her öğenin elemanı.
`itemClassName`	`string`		Her öğe elemanı için class; `itemStyle` satır içi stilini ayarlar.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Öğelerin nasıl girip çıktığı.
`distance`	`number`	`16`	`rise` ve `slide` için piksel cinsinden yol.
`stagger`	`number`	`40`	Giren öğeler arasındaki milisaniye.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kademenin yönü.
`present`	`boolean`	`true`	`false` düzeni koruyarak her öğeyi canlanarak çıkarır; `true` onları geri getirir.
`initial`	`boolean`	`true`	Liste bağlandığında girişi oynatır.
`playKey`	`string \| number`		Değiştirmek girişi yeniden oynatır.
`transition`	`Transition`	`spring`	Giren ve çıkan öğeler için geçiş.
`layoutTransition`	`Transition`	`spring`	Yeni konumlara süzülen öğeler için geçiş.

Bileşen sayfası ve tezgâh

MotionReorder

Bir listeyi ya da ızgarayı sürükleyerek yeniden sıralayın; klavyeyle taşıma dahil.

Prop	Tip	Varsayılan	Açıklama
`items`	`readonly T[]`		Sırayı siz denetlediğinizde öğeler.
`defaultItems`	`readonly T[]`	`[]`	Sırayı bileşen tuttuğunda başlangıç öğeleri.
`onItemsChange`	`(items, { reason, key }) => void`		Yeni sırayla ve bunun sürüklemeden, bırakmadan ya da klavyeden gelip gelmediğiyle çalışır.
`getKey`	`(item) => string \| number`	`item`	Bir öğe için benzersiz bir key döndürür. Varsayılan öğenin kendisidir.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Bir öğeyi çizer; index'ini ve sürüklenip sürüklenmediğini alır.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` sürüklerken diğer öğeleri hareket ettirir; `drop` bırakmayı bekler.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` ya da `grid`.
`columns`	`number`	`3`	Izgaradaki sütunlar.
`gap`	`number`	`12`	Öğeler arasındaki boşluk, piksel.
`disabled`	`boolean`	`false`	Sürüklemeyi kapatır.
`duration`	`number`	`260`	Yol veren öğeler için milisaniye.
`itemClassName`	`string`		Her öğe elemanı için class; `itemStyle` satır içi stilini ayarlar.

Bileşen sayfası ve tezgâh

Hareketler

MotionSwipe

Yatay kaydırmayla eylemleri gösteren ve kaydırarak atılabilen bir satır.

Prop	Tip	Varsayılan	Açıklama
`children`	`ReactNode`		Satır içeriği.
`startActions`	`ReactNode`		Satır sona doğru sürüklendiğinde satır başında gösterilir.
`endActions`	`ReactNode`		Satır başa doğru sürüklendiğinde satır sonunda gösterilir.
`dismiss`	`'start' \| 'end' \| 'both'`		Uzun bir kaydırmanın ya da fırlatmanın satırı kaldırdığı taraflar.
`onDismiss`	`(side) => void`		Satır dışarı kayıp daraldıktan sonra çalışır; öğeyi verinizden burada kaldırın.
`onOpenChange`	`(side \| null) => void`		Açık tarafla ya da satır kapanınca `null` ile çalışır.
`disabled`	`boolean`	`false`	Kaydırmayı kapatır.
`contentClassName`	`string`		Satır içeriği için class; `contentStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Bileşen sayfası ve tezgâh

MotionHold

Onaylamak için basılı tutun; erken bırakmak geri sarar.

Prop	Tip	Varsayılan	Açıklama
`children`	`ReactNode`		Düğme etiketi.
`onConfirm`	`() => void`		Basılı tutma tamamlanınca çalışır.
`duration`	`number`	`1200`	Basmanın tutulması gereken milisaniye.
`disabled`	`boolean`	`false`	Düğmeyi kapatır.
`fillClassName`	`string`		Büyüyen dolgu için class; `fillStyle` satır içi stilini ayarlar.

Bileşen sayfası ve tezgâh

Katmanlar

MotionSheet

Durma noktalarıyla alt sheet, üst sheet ya da yan çekmece.

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	`false`	Sheet'in gösterilip gösterilmediği.
`onOpenChange`	`(open) => void`		Sheet sürüklenerek, dokunularak ya da Escape ile kapatıldığında `false` ile çalışır.
`detents`	`(number \| 'content')[]`	`['content']`	Durgun boyutlar: ekranın bir kesri, piksel ya da `'content'`.
`detent`	`number`		Denetimli durma noktası index'i.
`defaultDetent`	`number`	`0`	`detent` olmadan açarken kullanılan durma noktası index'i.
`onDetentChange`	`(index) => void`		Sheet'in yerleştiği durma noktasının index'iyle çalışır.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Sheet'in geldiği kenar.
`modal`	`boolean`	`true`	Bir arka plan ekler, odağı içinde tutar ve sayfayı etkisiz kılar.
`dismissible`	`boolean`	`true`	En küçük durma noktasının ötesine sürüklemek, arka plan ve Escape onu kapatır.
`backdropClassName`	`string`		Arka plan için class; `backdropStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Bileşen sayfası ve tezgâh

MotionZoom

Bulunduğu yerden ekranı dolduracak şekilde yakınlaşan bir görsel.

Prop	Tip	Varsayılan	Açıklama
`src`	`string`		Yerinde gösterilen görsel.
`zoomSrc`	`string`		Yüklenince gösterilen daha büyük görsel; aynı en boy oranını koruyun.
`margin`	`number`	`24`	Yakınlaştırılan görselin çevresinde bırakılan boşluk, piksel.
`disabled`	`boolean`	`false`	Yakınlaştırmayı kapatır.
`onZoomChange`	`(zoomed) => void`		Yakınlaştırılınca `true`, kapanınca `false` ile çalışır.
`backdropStyle`	`CSSProperties`		Arka plan için satır içi stil.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Bileşen sayfası ve tezgâh

İlerleme

ProgressBar

Belirsiz durumlu, denetimli bir ilerleme çizgisi.

Prop	Tip	Varsayılan	Açıklama
`value`	`number \| null`		`0`'dan `max`'a ilerleme; `null` belirsizdir.
`max`	`number`	`100`	Tamamlandı anlamına gelen değer.
`color`	`string`	`'currentColor'`	Dolgu rengi.
`trackColor`	`string`	`'#e7ece9'`	Ray rengi.
`thickness`	`number`	`8`	Piksel cinsinden çizgi kalınlığı.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Soldan (`ltr`) ya da sağdan (`rtl`) doldurur.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Bileşen sayfası ve tezgâh

ProgressRing

Belirsiz durumlu, denetimli bir ilerleme halkası.

Prop	Tip	Varsayılan	Açıklama
`value`	`number \| null`		`0`'dan `max`'a ilerleme; `null` belirsizdir.
`max`	`number`	`100`	Tamamlandı anlamına gelen değer.
`size`	`number`	`96`	Piksel cinsinden çap.
`thickness`	`number`	`8`	Piksel cinsinden halka kalınlığı.
`color`	`string`	`'currentColor'`	Yay rengi.
`trackColor`	`string`	`'#e7ece9'`	Ray rengi.
`children`	`ReactNode`		Ortada gösterilen etiket.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Bileşen sayfası ve tezgâh

Geçişler

motionTokens

Herhangi bir transition prop'u için hazır değerler.

Prop	Tip	Varsayılan	Açıklama
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Milisaniye cinsinden süreler.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Süre ve adlandırılmış eğri içeren timing geçişleri.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Hızlı ve sıkıdan yumuşak ve sekene kadar yay geçişleri.

Geçişler

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}