Referința API

Fiecare export din @kkwaenggwari/animated-chorus, cu props, tipuri și valori implicite. Aceleași nume funcționează pe web și în React Native.

Filtru17 API-uri

Numere și text

MotionNumber

Un număr ale cărui cifre se rotesc ca niște roți.

Prop	Tip	Implicit	Descriere
`value`	`number \| bigint \| string`	`—`obligatoriu	Numărul sau un text numeric formatat de apelant.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` mută fiecare cifră schimbată cu un pas; `roll` trece prin cifrele intermediare.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` urmează schimbarea de mărime, ca transporturile să se rotească într-un singur sens; `digit` compară fiecare cifră separat.
`stagger`	`number`	`45`	Milisecunde între cifrele schimbate, de la unități spre exterior. Întreaga undă este limitată.
`format`	`(value) => string \| Intl.NumberFormatOptions`		O funcție care returnează textul de afișat sau opțiuni `Intl.NumberFormat` (cu `intl`).
`intl`	`boolean`	`false`	Folosește `Intl.NumberFormat` integrat. Dezactivat implicit, ca niciun mediu de rulare să nu aibă nevoie de `Intl`.
`locale`	`string \| string[]`		Localizarea pentru `intl`.
`prefix`	`string`		Text înaintea numărului.
`suffix`	`string`		Text după număr.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(value) => void`		Rulează cu valoarea după ce cifrele s-au așezat.

Pagina componentei și bancul de lucru

MotionText

Text care se animă când se schimbă: textul numeric se rotește pe cifre, celălalt text se schimbă.

Prop	Tip	Implicit	Descriere
`children`	`ReactNode`		Textul de afișat.
`as`	`element`	`'span'`	Elementul de randat.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(text) => void`		Rulează când mișcarea se așază.

Pagina componentei și bancul de lucru

MotionStream

Text în flux afișat într-un ritm constant, care recuperează rafalele.

Prop	Tip	Implicit	Descriere
`text`	`string`	`—`obligatoriu	Textul de până acum. Textul care crește apare într-un ritm constant; o rescriere continuă de la începutul comun.
`speed`	`number`	`90`	Rata de bază a afișării, în caractere pe secundă.
`catchUp`	`number`	`900`	O restanță este afișată prin accelerare în circa atâtea milisecunde.
`initial`	`boolean`	`false`	Afișează treptat și textul prezent la montare (altfel apare imediat).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` face caracterele noi să apară treptat; `none` le arată direct.
`children`	`(visible: string) => ReactNode`		O funcție care primește textul dozat, de exemplu pentru a randa Markdown.
`as`	`element`	`'span'`	Elementul de randat.
`onMotionComplete`	`(text) => void`		Rulează de fiecare dată când afișarea ajunge din urmă `text`.

Pagina componentei și bancul de lucru

Conținut și mărime

MotionSwap

Conținut care trece prin fondu încrucișat cât elementul se redimensionează.

Prop	Tip	Implicit	Descriere
`value`	`unknown`		Identitatea conținutului; o valoare nouă declanșează schimbarea. Copiii cu text simplu sunt propria identitate.
`children`	`ReactNode`		Conținutul.
`as`	`element`	`'span'`	Elementul de randat.
`inline`	`boolean`	`as === 'span'`	`true` se dimensionează după conținut (etichete, pictograme); `false` umple lățimea părintelui și animă înălțimea.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Unde stă conținutul cât se schimbă mărimea.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Cum intră și iese conținutul: `up` urcă, `down` coboară, `scale` crește.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(value) => void`		Rulează când mișcarea se așază.

Pagina componentei și bancul de lucru

MotionHeight

Animă înălțimea după conținut: restrângere, extindere și schimbări de conținut.

Prop	Tip	Implicit	Descriere
`open`	`boolean`	`true`	`false` restrânge la înălțime zero; conținutul rămâne montat, dar ascuns și inert.
`children`	`ReactNode`		Conținutul.
`as`	`element`	`'div'`	Elementul de randat.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(open) => void`		Rulează cu `open` după ce înălțimea s-a așezat.

Pagina componentei și bancul de lucru

MotionPresence

Păstrează conținutul montat în timp ce intră și iese animat.

Prop	Tip	Implicit	Descriere
`present`	`boolean`	`—`obligatoriu	Arată sau ascunde conținutul. Schimbați asta în loc să demontați.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Poza în repaus.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Poza cu care pleacă și din care intră conținutul.
`as`	`element`	`'div'`	Elementul de randat.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onExitComplete`	`() => void`		Rulează după ce conținutul a plecat și a fost eliminat.

Pagina componentei și bancul de lucru

Selecție și paginare

MotionHighlight

Elemente din date, cu un singur evidențiator care se mută la elementul selectat.

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`	`—`obligatoriu	Tabloul cu datele dumneavoastră.
`value`	`key \| null`	`—`obligatoriu	Key-ul elementului evidențiat; `null` ascunde evidențiatorul.
`onValueChange`	`(key, item) => void`		Rulează cu key-ul și elementul când un element este apăsat.
`getKey`	`(item) => string \| number`	`item.id`	Returnează un key unic și stabil pentru un element. Implicit `item.id` sau elementul însuși pentru șiruri și numere.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Desenează un element; primește dacă este selectat.
`hover`	`boolean`	`false`	Urmează cursorul peste elemente și revine la `value` la ieșire (web).
`itemAs`	`element`	`'button'`	Elementul pentru fiecare element din listă.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.
`highlightClassName`	`string`		Clasă pentru evidențiator; `highlightStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Pagina componentei și bancul de lucru

MotionPager

Pagini glisabile din date.

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`	`—`obligatoriu	Tabloul cu datele dumneavoastră.
`index`	`number`		Pagina afișată. Omiteți-o ca pagerul să și-o gestioneze singur.
`defaultIndex`	`number`	`0`	Pagina de start când `index` nu este controlat.
`onIndexChange`	`(index, item) => void`		Rulează cu indexul și elementul imediat ce se așază o glisare, o tastă sau un gest de rotiță.
`getKey`	`(item) => string \| number`	`item.id`	Returnează un key unic și stabil pentru un element. Implicit `item.id` sau elementul însuși pentru șiruri și numere.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Desenează o pagină; primește indexul și dacă este activă.
`gap`	`number`	`0`	Spațiul dintre pagini, în pixeli.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Pagina componentei și bancul de lucru

Liste

MotionList

O listă cu key-uri din date care animă doar ce s-a schimbat.

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`	`—`obligatoriu	Tabloul cu datele dumneavoastră.
`getKey`	`(item) => string \| number`	`item.id`	Returnează un key unic și stabil pentru un element. Implicit `item.id` sau elementul însuși pentru șiruri și numere.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Desenează un element.
`as`	`element`	`'div'`	Elementul de randat.
`itemAs`	`element`	`'li' \| 'div'`	Elementul pentru fiecare element din listă.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Cum intră și ies elementele.
`distance`	`number`	`16`	Distanța parcursă de `rise` și `slide`, în pixeli.
`stagger`	`number`	`40`	Milisecunde între elementele care intră.
`order`	`'forward' \| 'reverse'`	`'forward'`	Direcția cascadei.
`present`	`boolean`	`true`	`false` animă ieșirea fiecărui element păstrând layoutul; `true` le aduce înapoi.
`initial`	`boolean`	`true`	Redă intrarea când lista se montează.
`playKey`	`string \| number`		Schimbarea lui redă din nou intrarea.
`transition`	`Transition`	`spring`	Tranziția pentru elementele care intră și ies.
`layoutTransition`	`Transition`	`spring`	Tranziția pentru elementele care alunecă spre poziții noi.

Pagina componentei și bancul de lucru

MotionReorder

Trageți pentru a reordona o listă sau o grilă, cu mutări de la tastatură.

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`		Elementele, când controlați dumneavoastră ordinea.
`defaultItems`	`readonly T[]`	`[]`	Elementele de pornire, când componenta păstrează ordinea.
`onItemsChange`	`(items, { reason, key }) => void`		Rulează cu noua ordine și cu sursa ei: tragere, eliberare sau tastatură.
`getKey`	`(item) => string \| number`	`item`	Returnează un key unic pentru un element. Implicit, elementul însuși.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Desenează un element; primește indexul și dacă este tras.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` mută celelalte elemente în timpul tragerii; `drop` așteaptă eliberarea.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` sau `grid`.
`columns`	`number`	`3`	Coloane într-o grilă.
`gap`	`number`	`12`	Spațiul dintre elemente, în pixeli.
`disabled`	`boolean`	`false`	Dezactivează tragerea.
`duration`	`number`	`260`	Milisecunde pentru elementele care se dau la o parte.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.

Pagina componentei și bancul de lucru

Gesturi

MotionSwipe

Un rând care dezvăluie acțiuni la o glisare orizontală și poate fi glisat deoparte.

Prop	Tip	Implicit	Descriere
`children`	`ReactNode`		Conținutul rândului.
`startActions`	`ReactNode`		Dezvăluite la începutul rândului când rândul e tras spre capăt.
`endActions`	`ReactNode`		Dezvăluite la capătul rândului când rândul e tras spre început.
`dismiss`	`'start' \| 'end' \| 'both'`		Părțile în care o glisare lungă sau o aruncare elimină rândul.
`onDismiss`	`(side) => void`		Rulează după ce rândul a ieșit și s-a restrâns; eliminați aici elementul din date.
`onOpenChange`	`(side \| null) => void`		Rulează cu partea deschisă sau cu `null` când rândul se închide.
`disabled`	`boolean`	`false`	Dezactivează glisarea.
`contentClassName`	`string`		Clasă pentru conținutul rândului; `contentStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Pagina componentei și bancul de lucru

MotionHold

Apăsați lung pentru a confirma; o eliberare prea devreme derulează înapoi.

Prop	Tip	Implicit	Descriere
`children`	`ReactNode`		Eticheta butonului.
`onConfirm`	`() => void`		Rulează după ce apăsarea lungă se încheie.
`duration`	`number`	`1200`	Milisecundele cât trebuie ținută apăsarea.
`disabled`	`boolean`	`false`	Dezactivează butonul.
`fillClassName`	`string`		Clasă pentru umplerea care crește; `fillStyle` îi setează stilul inline.

Pagina componentei și bancul de lucru

Suprapuneri

MotionSheet

Sheet inferior, sheet superior sau sertar lateral, cu opriri.

Prop	Tip	Implicit	Descriere
`open`	`boolean`	`false`	Dacă sheet-ul este afișat.
`onOpenChange`	`(open) => void`		Rulează cu `false` când sheet-ul e închis prin tragere, atingere sau Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Mărimi de repaus: o fracțiune din ecran, pixeli sau `'content'`.
`detent`	`number`		Indexul de oprire controlat.
`defaultDetent`	`number`	`0`	Indexul de oprire folosit la deschiderea fără `detent`.
`onDetentChange`	`(index) => void`		Rulează cu indexul opririi pe care se așază sheet-ul.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Marginea de pe care vine sheet-ul.
`modal`	`boolean`	`true`	Adaugă un fundal, păstrează focusul înăuntru și face pagina inertă.
`dismissible`	`boolean`	`true`	Tragerea dincolo de cea mai mică oprire, fundalul și Escape îl închid.
`backdropClassName`	`string`		Clasă pentru fundal; `backdropStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Pagina componentei și bancul de lucru

MotionZoom

O imagine care se mărește de unde se află până umple ecranul.

Prop	Tip	Implicit	Descriere
`src`	`string`		Imaginea afișată pe loc.
`zoomSrc`	`string`		O imagine mai mare, afișată după ce s-a încărcat; păstrați același raport de aspect.
`margin`	`number`	`24`	Spațiul lăsat în jurul imaginii mărite, în pixeli.
`disabled`	`boolean`	`false`	Dezactivează zoomul.
`onZoomChange`	`(zoomed) => void`		Rulează cu `true` la mărire și cu `false` la închidere.
`backdropStyle`	`CSSProperties`		Stil inline pentru fundal.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Pagina componentei și bancul de lucru

Progres

ProgressBar

O linie de progres controlată, cu stare nedeterminată.

Prop	Tip	Implicit	Descriere
`value`	`number \| null`		Progres de la `0` la `max`; `null` înseamnă nedeterminat.
`max`	`number`	`100`	Valoarea care înseamnă încheiat.
`color`	`string`	`'currentColor'`	Culoarea umplerii.
`trackColor`	`string`	`'#e7ece9'`	Culoarea pistei.
`thickness`	`number`	`8`	Grosimea liniei, în pixeli.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Umple de la stânga (`ltr`) sau de la dreapta (`rtl`).
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Pagina componentei și bancul de lucru

ProgressRing

Un inel de progres controlat, cu stare nedeterminată.

Prop	Tip	Implicit	Descriere
`value`	`number \| null`		Progres de la `0` la `max`; `null` înseamnă nedeterminat.
`max`	`number`	`100`	Valoarea care înseamnă încheiat.
`size`	`number`	`96`	Diametrul, în pixeli.
`thickness`	`number`	`8`	Grosimea inelului, în pixeli.
`color`	`string`	`'currentColor'`	Culoarea arcului.
`trackColor`	`string`	`'#e7ece9'`	Culoarea pistei.
`children`	`ReactNode`		O etichetă afișată în centru.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Pagina componentei și bancul de lucru

Tranziții

motionTokens

Valori gata făcute pentru orice prop transition.

Prop	Tip	Implicit	Descriere
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Durate în milisecunde.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Tranziții timing cu o durată și o curbă cu nume.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Tranziții cu arc, de la rapide și ferme la blânde și săltărețe.

Tranziții

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} />
    </>
  );
}