Referencia API

Každý export @kkwaenggwari/animated-chorus s props, typmi a predvolenými hodnotami. Rovnaké názvy fungujú na webe aj v React Native.

FilterAPI: 17

Čísla a text

MotionNumber

Číslo, ktorého rády sa točia ako kolieska.

Prop	Typ	Predvolené	Popis
`value`	`number \| bigint \| string`	`—`povinné	Číslo alebo číselný text, ktorý ste naformátovali.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` posunie každý zmenený rád o jeden krok; `roll` prejde číslicami medzi nimi.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` sleduje zmenu veľkosti, takže prenosy rolujú jedným smerom; `digit` porovnáva každý rád zvlášť.
`stagger`	`number`	`45`	Milisekundy medzi zmenenými rádmi, od jednotiek von. Celá vlna je časovo obmedzená.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcia vracajúca text na zobrazenie, alebo voľby `Intl.NumberFormat` (s `intl`).
`intl`	`boolean`	`false`	Použiť vstavaný `Intl.NumberFormat`. Predvolene vypnuté, aby žiadne behové prostredie `Intl` nepotrebovalo.
`locale`	`string \| string[]`		Locale pre `intl`.
`prefix`	`string`		Text pred číslom.
`suffix`	`string`		Text za číslom.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(value) => void`		Spustí sa s hodnotou, keď rády dosadnú.

Stránka komponentu a pracovný stôl

MotionText

Text, ktorý sa pri zmene animuje: číselný text roluje po rádoch, ostatný sa vymení.

Prop	Typ	Predvolené	Popis
`children`	`ReactNode`		Text na zobrazenie.
`as`	`element`	`'span'`	Prvok, ktorý sa renderuje.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(text) => void`		Spustí sa, keď pohyb dosadne.

Stránka komponentu a pracovný stôl

MotionStream

Streamovaný text odhaľovaný stálym tempom, ktorý dobieha nárazy.

Prop	Typ	Predvolené	Popis
`text`	`string`	`—`povinné	Doterajší text. Rastúci text sa odhaľuje stálym tempom; prepis pokračuje od spoločného začiatku.
`speed`	`number`	`90`	Základná rýchlosť odhaľovania v znakoch za sekundu.
`catchUp`	`number`	`900`	Nahromadený text sa zrýchlením odhalí približne za toľko milisekúnd.
`initial`	`boolean`	`false`	Odhaliť aj text, ktorý existuje pri pripojení (inak sa zobrazí hneď).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` nové znaky plynulo zobrazí; `none` ich ukáže priamo.
`children`	`(visible: string) => ReactNode`		Funkcia, ktorá dostáva text v danom tempe, napríklad na render Markdown.
`as`	`element`	`'span'`	Prvok, ktorý sa renderuje.
`onMotionComplete`	`(text) => void`		Spustí sa zakaždým, keď odhaľovanie dobehne `text`.

Stránka komponentu a pracovný stôl

Obsah a veľkosť

MotionSwap

Obsah, ktorý sa prelína, kým prvok mení veľkosť.

Prop	Typ	Predvolené	Popis
`value`	`unknown`		Identita obsahu; nová hodnota vyvolá výmenu. Potomkovia tvorení len textom sú sami svojou identitou.
`children`	`ReactNode`		Obsah.
`as`	`element`	`'span'`	Prvok, ktorý sa renderuje.
`inline`	`boolean`	`as === 'span'`	`true` prispôsobí veľkosť obsahu (popisky, ikony); `false` vyplní šírku rodiča a animuje výšku.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Kde obsah sedí, kým sa veľkosť mení.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Ako obsah prichádza a odchádza: `up` stúpa, `down` klesá, `scale` rastie.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(value) => void`		Spustí sa, keď pohyb dosadne.

Stránka komponentu a pracovný stôl

MotionHeight

Animuje výšku podľa obsahu: zbalenie, rozbalenie a zmeny obsahu.

Prop	Typ	Predvolené	Popis
`open`	`boolean`	`true`	`false` zbalí na nulovú výšku; obsah zostane pripojený, ale skrytý a neaktívny.
`children`	`ReactNode`		Obsah.
`as`	`element`	`'div'`	Prvok, ktorý sa renderuje.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(open) => void`		Spustí sa s `open`, keď výška dosadne.

Stránka komponentu a pracovný stôl

MotionPresence

Drží obsah pripojený, kým sa animovane objavuje a odchádza.

Prop	Typ	Predvolené	Popis
`present`	`boolean`	`—`povinné	Zobraziť alebo skryť obsah. Meňte toto namiesto odpojenia.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Póza v pokoji.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Póza, s ktorou obsah odchádza a z ktorej prichádza.
`as`	`element`	`'div'`	Prvok, ktorý sa renderuje.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onExitComplete`	`() => void`		Spustí sa po tom, čo obsah odišiel a bol odstránený.

Stránka komponentu a pracovný stôl

Výber a stránky

MotionHighlight

Položky z údajov s jedným zvýraznením, ktoré putuje k vybranej položke.

Prop	Typ	Predvolené	Popis
`items`	`readonly T[]`	`—`povinné	Vaše pole údajov.
`value`	`key \| null`	`—`povinné	Kľúč zvýraznenej položky; `null` zvýraznenie skryje.
`onValueChange`	`(key, item) => void`		Spustí sa s kľúčom a položkou pri stlačení položky.
`getKey`	`(item) => string \| number`	`item.id`	Vracia jedinečný stabilný kľúč položky. Predvolene `item.id`, pri reťazcoch a číslach samotnú položku.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Vykreslí položku; dostane informáciu, či je vybraná.
`hover`	`boolean`	`false`	Sledovať ukazovateľ nad položkami a po odchode sa vrátiť na `value` (web).
`itemAs`	`element`	`'button'`	Prvok pre každú položku.
`itemClassName`	`string`		Trieda pre prvok každej položky; `itemStyle` nastaví jeho inline štýl.
`highlightClassName`	`string`		Trieda pre zvýraznenie; `highlightStyle` nastaví jeho inline štýl.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Stránka komponentu a pracovný stôl

MotionPager

Stránky z údajov na listovanie potiahnutím.

Prop	Typ	Predvolené	Popis
`items`	`readonly T[]`	`—`povinné	Vaše pole údajov.
`index`	`number`		Zobrazená stránka. Vynechajte ju a pager si bude vlastnú stránku držať sám.
`defaultIndex`	`number`	`0`	Počiatočná stránka, keď `index` nie je riadený.
`onIndexChange`	`(index, item) => void`		Spustí sa s indexom a položkou, len čo sa potiahnutie, kláves alebo gesto kolieska usadí.
`getKey`	`(item) => string \| number`	`item.id`	Vracia jedinečný stabilný kľúč položky. Predvolene `item.id`, pri reťazcoch a číslach samotnú položku.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Vykreslí stránku; dostane jej index a to, či je aktívna.
`gap`	`number`	`0`	Medzera medzi stránkami v pixeloch.
`itemClassName`	`string`		Trieda pre prvok každej položky; `itemStyle` nastaví jeho inline štýl.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Stránka komponentu a pracovný stôl

Zoznamy

MotionList

Zoznam s kľúčmi z údajov, ktorý animuje len to, čo sa zmenilo.

Prop	Typ	Predvolené	Popis
`items`	`readonly T[]`	`—`povinné	Vaše pole údajov.
`getKey`	`(item) => string \| number`	`item.id`	Vracia jedinečný stabilný kľúč položky. Predvolene `item.id`, pri reťazcoch a číslach samotnú položku.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Vykreslí položku.
`as`	`element`	`'div'`	Prvok, ktorý sa renderuje.
`itemAs`	`element`	`'li' \| 'div'`	Prvok pre každú položku.
`itemClassName`	`string`		Trieda pre prvok každej položky; `itemStyle` nastaví jeho inline štýl.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Ako položky prichádzajú a odchádzajú.
`distance`	`number`	`16`	Dráha `rise` a `slide` v pixeloch.
`stagger`	`number`	`40`	Milisekundy medzi prichádzajúcimi položkami.
`order`	`'forward' \| 'reverse'`	`'forward'`	Smer kaskády.
`present`	`boolean`	`true`	`false` animuje odchod všetkých položiek a zachová rozloženie; `true` ich vráti.
`initial`	`boolean`	`true`	Prehrať príchod pri pripojení zoznamu.
`playKey`	`string \| number`		Jeho zmena znova prehrá príchod.
`transition`	`Transition`	`spring`	Prechod pre prichádzajúce a odchádzajúce položky.
`layoutTransition`	`Transition`	`spring`	Prechod pre položky kĺžuce na nové miesta.

Stránka komponentu a pracovný stôl

MotionReorder

Radenie zoznamu alebo mriežky presúvaním, s presunmi klávesnicou.

Prop	Typ	Predvolené	Popis
`items`	`readonly T[]`		Položky, keď poradie riadite vy.
`defaultItems`	`readonly T[]`	`[]`	Počiatočné položky, keď poradie drží komponent.
`onItemsChange`	`(items, { reason, key }) => void`		Spustí sa s novým poradím a informáciou, či prišlo z ťahania, pustenia alebo klávesnice.
`getKey`	`(item) => string \| number`	`item`	Vracia jedinečný kľúč položky. Predvolene samotnú položku.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Vykreslí položku; dostane jej index a to, či sa ťahá.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` posúva ostatné položky počas ťahania; `drop` čaká na pustenie.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` alebo `grid`.
`columns`	`number`	`3`	Stĺpce v mriežke.
`gap`	`number`	`12`	Medzera medzi položkami v pixeloch.
`disabled`	`boolean`	`false`	Vypne ťahanie.
`duration`	`number`	`260`	Milisekundy, za ktoré položky uhnú.
`itemClassName`	`string`		Trieda pre prvok každej položky; `itemStyle` nastaví jeho inline štýl.

Stránka komponentu a pracovný stôl

Gestá

MotionSwipe

Riadok, ktorý vodorovným potiahnutím odkryje akcie a dá sa odsunúť.

Prop	Typ	Predvolené	Popis
`children`	`ReactNode`		Obsah riadka.
`startActions`	`ReactNode`		Odkryjú sa na začiatku riadka pri ťahaní ku koncu.
`endActions`	`ReactNode`		Odkryjú sa na konci riadka pri ťahaní k začiatku.
`dismiss`	`'start' \| 'end' \| 'both'`		Strany, na ktorých dlhé potiahnutie alebo hod riadok odoberie.
`onDismiss`	`(side) => void`		Spustí sa po tom, čo riadok vykĺzol a zbalil sa; tu položku odoberte zo svojich údajov.
`onOpenChange`	`(side \| null) => void`		Spustí sa s otvorenou stranou, alebo `null` pri zatvorení riadka.
`disabled`	`boolean`	`false`	Vypne potiahnutie.
`contentClassName`	`string`		Trieda pre obsah riadka; `contentStyle` nastaví jeho inline štýl.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Stránka komponentu a pracovný stôl

MotionHold

Stlačte a podržte na potvrdenie; predčasné pustenie vráti stav späť.

Prop	Typ	Predvolené	Popis
`children`	`ReactNode`		Popisok tlačidla.
`onConfirm`	`() => void`		Spustí sa po dokončení podržania.
`duration`	`number`	`1200`	Milisekundy, počas ktorých treba stlačenie držať.
`disabled`	`boolean`	`false`	Vypne tlačidlo.
`fillClassName`	`string`		Trieda pre rastúcu výplň; `fillStyle` nastaví jej inline štýl.

Stránka komponentu a pracovný stôl

Prekrytia

MotionSheet

Spodný alebo horný sheet či bočná zásuvka so zarážkami.

Prop	Typ	Predvolené	Popis
`open`	`boolean`	`false`	Či je sheet zobrazený.
`onOpenChange`	`(open) => void`		Spustí sa s `false`, keď sa sheet zavrie ťahaním, ťuknutím alebo klávesom Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Pokojové veľkosti: zlomok obrazovky, pixely alebo `'content'`.
`detent`	`number`		Riadený index zarážky.
`defaultDetent`	`number`	`0`	Index zarážky pri otvorení bez `detent`.
`onDetentChange`	`(index) => void`		Spustí sa s indexom zarážky, na ktorej sheet dosadne.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Okraj, z ktorého sheet prichádza.
`modal`	`boolean`	`true`	Pridá pozadie, drží fokus vnútri a urobí stránku neaktívnou.
`dismissible`	`boolean`	`true`	Zavrie ho ťahanie za najmenšiu zarážku, pozadie aj Escape.
`backdropClassName`	`string`		Trieda pre pozadie; `backdropStyle` nastaví jeho inline štýl.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Stránka komponentu a pracovný stôl

MotionZoom

Obrázok, ktorý sa z miesta, kde je, priblíži, až vyplní obrazovku.

Prop	Typ	Predvolené	Popis
`src`	`string`		Obrázok zobrazený na mieste.
`zoomSrc`	`string`		Väčší obrázok zobrazený po načítaní; zachovajte rovnaký pomer strán.
`margin`	`number`	`24`	Medzera okolo priblíženého obrázka v pixeloch.
`disabled`	`boolean`	`false`	Vypne priblíženie.
`onZoomChange`	`(zoomed) => void`		Spustí sa s `true` pri priblížení a `false` pri zatvorení.
`backdropStyle`	`CSSProperties`		Inline štýl pozadia.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Stránka komponentu a pracovný stôl

Priebeh

ProgressBar

Riadená čiara priebehu s neurčitým stavom.

Prop	Typ	Predvolené	Popis
`value`	`number \| null`		Priebeh od `0` do `max`; `null` je neurčitý.
`max`	`number`	`100`	Hodnota znamenajúca dokončenie.
`color`	`string`	`'currentColor'`	Farba výplne.
`trackColor`	`string`	`'#e7ece9'`	Farba dráhy.
`thickness`	`number`	`8`	Hrúbka čiary v pixeloch.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Plnenie zľava (`ltr`) alebo sprava (`rtl`).
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Stránka komponentu a pracovný stôl

ProgressRing

Riadený kruh priebehu s neurčitým stavom.

Prop	Typ	Predvolené	Popis
`value`	`number \| null`		Priebeh od `0` do `max`; `null` je neurčitý.
`max`	`number`	`100`	Hodnota znamenajúca dokončenie.
`size`	`number`	`96`	Priemer v pixeloch.
`thickness`	`number`	`8`	Hrúbka kruhu v pixeloch.
`color`	`string`	`'currentColor'`	Farba oblúka.
`trackColor`	`string`	`'#e7ece9'`	Farba dráhy.
`children`	`ReactNode`		Popisok v strede.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Stránka komponentu a pracovný stôl

Prechody

motionTokens

Hotové hodnoty pre ľubovoľnú prop transition.

Prop	Typ	Predvolené	Popis
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Dĺžky v milisekundách.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Prechody timing s dĺžkou a pomenovanou krivkou.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Pružinové prechody, od rýchlych a pevných po jemné a pružné.

Prechody

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