Referenca API-ja

Svaki export @kkwaenggwari/animated-chorus s props, tipovima i zadanim vrijednostima. Isti nazivi rade na webu i u React Nativeu.

FiltarAPI-ja: 17

Brojevi i tekst

MotionNumber

Broj čija se mjesta vrte poput kotačića.

Prop	Tip	Zadano	Opis
`value`	`number \| bigint \| string`	`—`obavezno	Broj ili brojčani tekst koji ste sami oblikovali.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` pomiče svako promijenjeno mjesto za jedan korak; `roll` prolazi kroz znamenke između.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` prati promjenu veličine, pa se prijenosi vrte u jednom smjeru; `digit` uspoređuje svako mjesto zasebno.
`stagger`	`number`	`45`	Milisekunde između promijenjenih mjesta, od jedinica prema van. Cijeli val je vremenski ograničen.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcija koja vraća tekst za prikaz ili opcije `Intl.NumberFormat` (uz `intl`).
`intl`	`boolean`	`false`	Koristi ugrađeni `Intl.NumberFormat`. Prema zadanom isključeno, kako nijedno okruženje ne bi trebalo `Intl`.
`locale`	`string \| string[]`		Lokalizacija za `intl`.
`prefix`	`string`		Tekst prije broja.
`suffix`	`string`		Tekst nakon broja.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onMotionComplete`	`(value) => void`		Izvodi se s vrijednošću kad se mjesta smire.

Stranica komponente i radni stol

MotionText

Tekst koji se animira kad se promijeni: brojčani tekst vrti se po mjestima, ostali se zamjenjuje.

Prop	Tip	Zadano	Opis
`children`	`ReactNode`		Tekst za prikaz.
`as`	`element`	`'span'`	Element koji se renderira.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onMotionComplete`	`(text) => void`		Izvodi se kad se pokret smiri.

Stranica komponente i radni stol

MotionStream

Tekst iz streama otkriven ujednačenim tempom koji sustiže nalete.

Prop	Tip	Zadano	Opis
`text`	`string`	`—`obavezno	Tekst do sada. Tekst koji raste otkriva se ujednačenim tempom; prepisivanje nastavlja od zajedničkog početka.
`speed`	`number`	`90`	Osnovna brzina otkrivanja u znakovima u sekundi.
`catchUp`	`number`	`900`	Zaostatak se ubrzanjem otkriva unutar otprilike toliko milisekundi.
`initial`	`boolean`	`false`	Otkrij i tekst prisutan pri montiranju (inače se prikazuje odmah).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` postupno prikazuje nove znakove; `none` ih prikazuje izravno.
`children`	`(visible: string) => ReactNode`		Funkcija koja prima tekst u zadanom tempu, primjerice za renderiranje Markdowna.
`as`	`element`	`'span'`	Element koji se renderira.
`onMotionComplete`	`(text) => void`		Izvodi se svaki put kad otkrivanje sustigne `text`.

Stranica komponente i radni stol

Sadržaj i veličina

MotionSwap

Sadržaj koji se prelijeva dok element mijenja veličinu.

Prop	Tip	Zadano	Opis
`value`	`unknown`		Identitet sadržaja; nova vrijednost uzrokuje zamjenu. Djeca koja su samo tekst sama su svoj identitet.
`children`	`ReactNode`		Sadržaj.
`as`	`element`	`'span'`	Element koji se renderira.
`inline`	`boolean`	`as === 'span'`	`true` prilagođava veličinu sadržaju (oznake, ikone); `false` ispunjava širinu roditelja i animira visinu.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Gdje je sadržaj dok se veličina mijenja.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Kako sadržaj ulazi i izlazi: `up` se diže, `down` se spušta, `scale` raste.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onMotionComplete`	`(value) => void`		Izvodi se kad se pokret smiri.

Stranica komponente i radni stol

MotionHeight

Animira visinu prema sadržaju: sklapanje, rasklapanje i promjene sadržaja.

Prop	Tip	Zadano	Opis
`open`	`boolean`	`true`	`false` sklapa na nultu visinu; sadržaj ostaje montiran, ali skriven i neaktivan.
`children`	`ReactNode`		Sadržaj.
`as`	`element`	`'div'`	Element koji se renderira.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onMotionComplete`	`(open) => void`		Izvodi se s `open` kad se visina smiri.

Stranica komponente i radni stol

MotionPresence

Drži sadržaj montiranim dok se animirano pojavljuje i odlazi.

Prop	Tip	Zadano	Opis
`present`	`boolean`	`—`obavezno	Prikaži ili sakrij sadržaj. Mijenjajte ovo umjesto demontiranja.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Poza u mirovanju.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Poza s kojom sadržaj odlazi i iz koje ulazi.
`as`	`element`	`'div'`	Element koji se renderira.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onExitComplete`	`() => void`		Izvodi se nakon što je sadržaj otišao i uklonjen.

Stranica komponente i radni stol

Odabir i stranice

MotionHighlight

Stavke iz podataka s jednim isticanjem koje putuje do odabrane stavke.

Prop	Tip	Zadano	Opis
`items`	`readonly T[]`	`—`obavezno	Vaš niz podataka.
`value`	`key \| null`	`—`obavezno	Ključ istaknute stavke; `null` skriva isticanje.
`onValueChange`	`(key, item) => void`		Izvodi se s ključem i stavkom kad se stavka pritisne.
`getKey`	`(item) => string \| number`	`item.id`	Vraća jedinstven, stabilan ključ stavke. Zadano je `item.id`, a za nizove znakova i brojeve sama stavka.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Crta stavku; prima je li odabrana.
`hover`	`boolean`	`false`	Prati pokazivač preko stavki i vrati se na `value` kad ode (web).
`itemAs`	`element`	`'button'`	Element za svaku stavku.
`itemClassName`	`string`		Klasa za element svake stavke; `itemStyle` postavlja njegov inline stil.
`highlightClassName`	`string`		Klasa za isticanje; `highlightStyle` postavlja njegov inline stil.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.

Stranica komponente i radni stol

MotionPager

Stranice iz podataka za listanje povlačenjem.

Prop	Tip	Zadano	Opis
`items`	`readonly T[]`	`—`obavezno	Vaš niz podataka.
`index`	`number`		Prikazana stranica. Izostavite je da pager sam vodi svoju.
`defaultIndex`	`number`	`0`	Početna stranica kad `index` nije kontroliran.
`onIndexChange`	`(index, item) => void`		Izvodi se s indeksom i stavkom čim se povlačenje, tipka ili gesta kotačića smiri.
`getKey`	`(item) => string \| number`	`item.id`	Vraća jedinstven, stabilan ključ stavke. Zadano je `item.id`, a za nizove znakova i brojeve sama stavka.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Crta stranicu; prima njezin indeks i je li aktivna.
`gap`	`number`	`0`	Razmak između stranica u pikselima.
`itemClassName`	`string`		Klasa za element svake stavke; `itemStyle` postavlja njegov inline stil.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.

Stranica komponente i radni stol

Popisi

MotionList

Popis s ključevima iz podataka koji animira samo ono što se promijenilo.

Prop	Tip	Zadano	Opis
`items`	`readonly T[]`	`—`obavezno	Vaš niz podataka.
`getKey`	`(item) => string \| number`	`item.id`	Vraća jedinstven, stabilan ključ stavke. Zadano je `item.id`, a za nizove znakova i brojeve sama stavka.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Crta stavku.
`as`	`element`	`'div'`	Element koji se renderira.
`itemAs`	`element`	`'li' \| 'div'`	Element za svaku stavku.
`itemClassName`	`string`		Klasa za element svake stavke; `itemStyle` postavlja njegov inline stil.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Kako stavke ulaze i izlaze.
`distance`	`number`	`16`	Put za `rise` i `slide` u pikselima.
`stagger`	`number`	`40`	Milisekunde između stavki koje ulaze.
`order`	`'forward' \| 'reverse'`	`'forward'`	Smjer kaskade.
`present`	`boolean`	`true`	`false` animira odlazak svih stavki uz zadržavanje rasporeda; `true` ih vraća.
`initial`	`boolean`	`true`	Reproduciraj ulazak kad se popis montira.
`playKey`	`string \| number`		Njegova promjena ponovno reproducira ulazak.
`transition`	`Transition`	`spring`	Prijelaz za stavke koje ulaze i izlaze.
`layoutTransition`	`Transition`	`spring`	Prijelaz za stavke koje klize na nove položaje.

Stranica komponente i radni stol

MotionReorder

Promjena redoslijeda popisa ili mreže povlačenjem, s pomicanjem tipkovnicom.

Prop	Tip	Zadano	Opis
`items`	`readonly T[]`		Stavke, kad vi upravljate redoslijedom.
`defaultItems`	`readonly T[]`	`[]`	Početne stavke, kad redoslijed čuva komponenta.
`onItemsChange`	`(items, { reason, key }) => void`		Izvodi se s novim redoslijedom i izvorom promjene: povlačenje, puštanje ili tipkovnica.
`getKey`	`(item) => string \| number`	`item`	Vraća jedinstven ključ stavke. Zadano je sama stavka.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Crta stavku; prima njezin indeks i povlači li se.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` pomiče ostale stavke tijekom povlačenja; `drop` čeka puštanje.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` ili `grid`.
`columns`	`number`	`3`	Stupci u mreži.
`gap`	`number`	`12`	Razmak između stavki u pikselima.
`disabled`	`boolean`	`false`	Isključuje povlačenje.
`duration`	`number`	`260`	Milisekunde za sklanjanje stavki.
`itemClassName`	`string`		Klasa za element svake stavke; `itemStyle` postavlja njegov inline stil.

Stranica komponente i radni stol

Geste

MotionSwipe

Redak koji vodoravnim povlačenjem otkriva radnje i može se odbaciti.

Prop	Tip	Zadano	Opis
`children`	`ReactNode`		Sadržaj retka.
`startActions`	`ReactNode`		Otkrivaju se na početku retka kad se povlači prema kraju.
`endActions`	`ReactNode`		Otkrivaju se na kraju retka kad se povlači prema početku.
`dismiss`	`'start' \| 'end' \| 'both'`		Strane na kojima dugo povlačenje ili bacanje uklanja redak.
`onDismiss`	`(side) => void`		Izvodi se nakon što je redak iskliznuo i sklopio se; ovdje uklonite stavku iz svojih podataka.
`onOpenChange`	`(side \| null) => void`		Izvodi se s otvorenom stranom ili `null` kad se redak zatvori.
`disabled`	`boolean`	`false`	Isključuje povlačenje.
`contentClassName`	`string`		Klasa za sadržaj retka; `contentStyle` postavlja njegov inline stil.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.

Stranica komponente i radni stol

MotionHold

Pritisnite i držite za potvrdu; rano puštanje vraća unatrag.

Prop	Tip	Zadano	Opis
`children`	`ReactNode`		Oznaka gumba.
`onConfirm`	`() => void`		Izvodi se kad je držanje dovršeno.
`duration`	`number`	`1200`	Milisekunde koliko se pritisak mora držati.
`disabled`	`boolean`	`false`	Isključuje gumb.
`fillClassName`	`string`		Klasa za ispunu koja raste; `fillStyle` postavlja njezin inline stil.

Stranica komponente i radni stol

Slojevi

MotionSheet

Donji ili gornji sheet ili bočna ladica sa zaustavnim točkama.

Prop	Tip	Zadano	Opis
`open`	`boolean`	`false`	Je li sheet prikazan.
`onOpenChange`	`(open) => void`		Izvodi se s `false` kad se sheet zatvori povlačenjem, dodirom ili tipkom Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Veličine mirovanja: dio zaslona, pikseli ili `'content'`.
`detent`	`number`		Kontrolirani indeks zaustavne točke.
`defaultDetent`	`number`	`0`	Indeks zaustavne točke pri otvaranju bez `detent`.
`onDetentChange`	`(index) => void`		Izvodi se s indeksom zaustavne točke na kojoj se sheet smiri.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Rub s kojeg sheet dolazi.
`modal`	`boolean`	`true`	Dodaje pozadinu, drži fokus unutra i čini stranicu neaktivnom.
`dismissible`	`boolean`	`true`	Zatvaraju ga povlačenje iza najmanje zaustavne točke, pozadina i Escape.
`backdropClassName`	`string`		Klasa za pozadinu; `backdropStyle` postavlja njezin inline stil.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.

Stranica komponente i radni stol

MotionZoom

Slika koja se zumira s mjesta na kojem jest dok ne ispuni zaslon.

Prop	Tip	Zadano	Opis
`src`	`string`		Slika prikazana na mjestu.
`zoomSrc`	`string`		Veća slika prikazana nakon učitavanja; zadržite isti omjer stranica.
`margin`	`number`	`24`	Razmak oko zumirane slike u pikselima.
`disabled`	`boolean`	`false`	Isključuje zumiranje.
`onZoomChange`	`(zoomed) => void`		Izvodi se s `true` pri zumiranju i `false` pri zatvaranju.
`backdropStyle`	`CSSProperties`		Inline stil za pozadinu.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.

Stranica komponente i radni stol

Napredak

ProgressBar

Kontrolirana crta napretka s neodređenim stanjem.

Prop	Tip	Zadano	Opis
`value`	`number \| null`		Napredak od `0` do `max`; `null` je neodređeno.
`max`	`number`	`100`	Vrijednost koja znači dovršeno.
`color`	`string`	`'currentColor'`	Boja ispune.
`trackColor`	`string`	`'#e7ece9'`	Boja staze.
`thickness`	`number`	`8`	Debljina crte u pikselima.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Punjenje slijeva (`ltr`) ili zdesna (`rtl`).
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.

Stranica komponente i radni stol

ProgressRing

Kontrolirani prsten napretka s neodređenim stanjem.

Prop	Tip	Zadano	Opis
`value`	`number \| null`		Napredak od `0` do `max`; `null` je neodređeno.
`max`	`number`	`100`	Vrijednost koja znači dovršeno.
`size`	`number`	`96`	Promjer u pikselima.
`thickness`	`number`	`8`	Debljina prstena u pikselima.
`color`	`string`	`'currentColor'`	Boja luka.
`trackColor`	`string`	`'#e7ece9'`	Boja staze.
`children`	`ReactNode`		Oznaka prikazana u sredini.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.

Stranica komponente i radni stol

Prijelazi

motionTokens

Gotove vrijednosti za bilo koji prop transition.

Prop	Tip	Zadano	Opis
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Trajanja u milisekundama.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Prijelazi timinga s trajanjem i imenovanom krivuljom.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Prijelazi s oprugom, od brzih i čvrstih do blagih i poskočnih.

Prijelazi

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