Reference API

Každý export @kkwaenggwari/animated-chorus s props, typy a výchozími hodnotami. Stejné názvy fungují na webu i v React Native.

FiltrAPI: 17

Čísla a text

MotionNumber

Číslo, jehož řády se točí jako kolečka.

Prop	Typ	Výchozí	Popis
`value`	`number \| bigint \| string`	`—`povinné	Číslo nebo číselný text, který jste naformátovali.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` posune každý změněný řád o jeden krok; `roll` projde číslicemi mezi.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` sleduje změnu velikosti, takže přenosy rolují jedním směrem; `digit` porovnává každý řád zvlášť.
`stagger`	`number`	`45`	Milisekundy mezi změněnými řády, od jednotek ven. Celá vlna je časově omezená.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkce vracející text k zobrazení, nebo volby `Intl.NumberFormat` (s `intl`).
`intl`	`boolean`	`false`	Použít vestavěný `Intl.NumberFormat`. Ve výchozím stavu vypnuto, aby žádné běhové prostředí `Intl` nepotřebovalo.
`locale`	`string \| string[]`		Locale pro `intl`.
`prefix`	`string`		Text před číslem.
`suffix`	`string`		Text za číslem.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.
`onMotionComplete`	`(value) => void`		Spustí se s hodnotou, když řády dosednou.

Stránka komponenty a pracovní stůl

MotionText

Text, který se při změně animuje: číselný text roluje po řádech, ostatní se vymění.

Prop	Typ	Výchozí	Popis
`children`	`ReactNode`		Text k zobrazení.
`as`	`element`	`'span'`	Prvek, který se renderuje.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.
`onMotionComplete`	`(text) => void`		Spustí se, když pohyb dosedne.

Stránka komponenty a pracovní stůl

MotionStream

Streamovaný text odhalovaný stálým tempem, který dohání nárazy.

Prop	Typ	Výchozí	Popis
`text`	`string`	`—`povinné	Dosavadní text. Rostoucí text se odhaluje stálým tempem; přepis pokračuje od společného začátku.
`speed`	`number`	`90`	Základní rychlost odhalování ve znacích za sekundu.
`catchUp`	`number`	`900`	Nahromaděný text se zrychlením odhalí přibližně za tolik milisekund.
`initial`	`boolean`	`false`	Odhalit i text, který existuje při připojení (jinak se zobrazí hned).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` nové znaky plynule zobrazí; `none` je ukáže přímo.
`children`	`(visible: string) => ReactNode`		Funkce, která dostává text v daném tempu, například pro render Markdown.
`as`	`element`	`'span'`	Prvek, který se renderuje.
`onMotionComplete`	`(text) => void`		Spustí se pokaždé, když odhalování dožene `text`.

Stránka komponenty a pracovní stůl

Obsah a velikost

MotionSwap

Obsah, který se prolíná, zatímco prvek mění velikost.

Prop	Typ	Výchozí	Popis
`value`	`unknown`		Identita obsahu; nová hodnota vyvolá výměnu. Potomci tvoření jen textem jsou sami svou identitou.
`children`	`ReactNode`		Obsah.
`as`	`element`	`'span'`	Prvek, který se renderuje.
`inline`	`boolean`	`as === 'span'`	`true` přizpůsobí velikost obsahu (popisky, ikony); `false` vyplní šířku rodiče a animuje výšku.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Kde obsah sedí, zatímco se velikost mění.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Jak obsah přichází a odchází: `up` stoupá, `down` klesá, `scale` roste.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.
`onMotionComplete`	`(value) => void`		Spustí se, když pohyb dosedne.

Stránka komponenty a pracovní stůl

MotionHeight

Animuje výšku podle obsahu: sbalení, rozbalení a změny obsahu.

Prop	Typ	Výchozí	Popis
`open`	`boolean`	`true`	`false` sbalí na nulovou výšku; obsah zůstane připojený, ale skrytý a neaktivní.
`children`	`ReactNode`		Obsah.
`as`	`element`	`'div'`	Prvek, který se renderuje.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.
`onMotionComplete`	`(open) => void`		Spustí se s `open`, když výška dosedne.

Stránka komponenty a pracovní stůl

MotionPresence

Drží obsah připojený, zatímco se animovaně objevuje a odchází.

Prop	Typ	Výchozí	Popis
`present`	`boolean`	`—`povinné	Zobrazit nebo skrýt obsah. Měňte toto místo odpojení.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Póza v klidu.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Póza, se kterou obsah odchází a ze které přichází.
`as`	`element`	`'div'`	Prvek, který se renderuje.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.
`onExitComplete`	`() => void`		Spustí se poté, co obsah odešel a byl odstraněn.

Stránka komponenty a pracovní stůl

Výběr a stránky

MotionHighlight

Položky z dat s jedním zvýrazněním, které putuje k vybrané položce.

Prop	Typ	Výchozí	Popis
`items`	`readonly T[]`	`—`povinné	Vaše pole dat.
`value`	`key \| null`	`—`povinné	Klíč zvýrazněné položky; `null` zvýraznění skryje.
`onValueChange`	`(key, item) => void`		Spustí se s klíčem a položkou při stisku položky.
`getKey`	`(item) => string \| number`	`item.id`	Vrací jedinečný stabilní klíč položky. Ve výchozím stavu `item.id`, u řetězců a čísel samotnou položku.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Vykreslí položku; dostane informaci, zda je vybraná.
`hover`	`boolean`	`false`	Sledovat ukazatel nad položkami a po odchodu se vrátit na `value` (web).
`itemAs`	`element`	`'button'`	Prvek pro každou položku.
`itemClassName`	`string`		Třída pro prvek každé položky; `itemStyle` nastaví jeho inline styl.
`highlightClassName`	`string`		Třída pro zvýraznění; `highlightStyle` nastaví jeho inline styl.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Stránka komponenty a pracovní stůl

MotionPager

Stránky z dat k listování přejetím.

Prop	Typ	Výchozí	Popis
`items`	`readonly T[]`	`—`povinné	Vaše pole dat.
`index`	`number`		Zobrazená stránka. Vynechte ji a pager si bude vlastní stránku držet sám.
`defaultIndex`	`number`	`0`	Počáteční stránka, když `index` není řízený.
`onIndexChange`	`(index, item) => void`		Spustí se s indexem a položkou, jakmile se přejetí, klávesa nebo gesto kolečka usadí.
`getKey`	`(item) => string \| number`	`item.id`	Vrací jedinečný stabilní klíč položky. Ve výchozím stavu `item.id`, u řetězců a čísel samotnou položku.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Vykreslí stránku; dostane její index a to, zda je aktivní.
`gap`	`number`	`0`	Mezera mezi stránkami v pixelech.
`itemClassName`	`string`		Třída pro prvek každé položky; `itemStyle` nastaví jeho inline styl.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Stránka komponenty a pracovní stůl

Seznamy

MotionList

Seznam s klíči z dat, který animuje jen to, co se změnilo.

Prop	Typ	Výchozí	Popis
`items`	`readonly T[]`	`—`povinné	Vaše pole dat.
`getKey`	`(item) => string \| number`	`item.id`	Vrací jedinečný stabilní klíč položky. Ve výchozím stavu `item.id`, u řetězců a čísel samotnou položku.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Vykreslí položku.
`as`	`element`	`'div'`	Prvek, který se renderuje.
`itemAs`	`element`	`'li' \| 'div'`	Prvek pro každou položku.
`itemClassName`	`string`		Třída pro prvek každé položky; `itemStyle` nastaví jeho inline styl.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Jak položky přicházejí a odcházejí.
`distance`	`number`	`16`	Dráha `rise` a `slide` v pixelech.
`stagger`	`number`	`40`	Milisekundy mezi příchozími položkami.
`order`	`'forward' \| 'reverse'`	`'forward'`	Směr kaskády.
`present`	`boolean`	`true`	`false` animuje odchod všech položek a zachová rozvržení; `true` je vrátí.
`initial`	`boolean`	`true`	Přehrát příchod při připojení seznamu.
`playKey`	`string \| number`		Jeho změna znovu přehraje příchod.
`transition`	`Transition`	`spring`	Přechod pro příchozí a odcházející položky.
`layoutTransition`	`Transition`	`spring`	Přechod pro položky klouzající na nová místa.

Stránka komponenty a pracovní stůl

MotionReorder

Řazení seznamu nebo mřížky přetažením, s přesuny klávesnicí.

Prop	Typ	Výchozí	Popis
`items`	`readonly T[]`		Položky, když pořadí řídíte vy.
`defaultItems`	`readonly T[]`	`[]`	Počáteční položky, když pořadí drží komponenta.
`onItemsChange`	`(items, { reason, key }) => void`		Spustí se s novým pořadím a informací, zda přišlo z tažení, puštění nebo klávesnice.
`getKey`	`(item) => string \| number`	`item`	Vrací jedinečný klíč položky. Ve výchozím stavu samotnou položku.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Vykreslí položku; dostane její index a to, zda se táhne.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` posouvá ostatní položky během tažení; `drop` čeká na puštění.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` nebo `grid`.
`columns`	`number`	`3`	Sloupce v mřížce.
`gap`	`number`	`12`	Mezera mezi položkami v pixelech.
`disabled`	`boolean`	`false`	Vypne tažení.
`duration`	`number`	`260`	Milisekundy, za které položky uhnou.
`itemClassName`	`string`		Třída pro prvek každé položky; `itemStyle` nastaví jeho inline styl.

Stránka komponenty a pracovní stůl

Gesta

MotionSwipe

Řádek, který vodorovným přejetím odkryje akce a dá se odsunout.

Prop	Typ	Výchozí	Popis
`children`	`ReactNode`		Obsah řádku.
`startActions`	`ReactNode`		Odkryjí se na začátku řádku při tažení ke konci.
`endActions`	`ReactNode`		Odkryjí se na konci řádku při tažení k začátku.
`dismiss`	`'start' \| 'end' \| 'both'`		Strany, na kterých dlouhé přejetí nebo hod řádek odebere.
`onDismiss`	`(side) => void`		Spustí se poté, co řádek vyklouzl a sbalil se; zde položku odeberte ze svých dat.
`onOpenChange`	`(side \| null) => void`		Spustí se s otevřenou stranou, nebo `null` při zavření řádku.
`disabled`	`boolean`	`false`	Vypne přejíždění.
`contentClassName`	`string`		Třída pro obsah řádku; `contentStyle` nastaví jeho inline styl.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Stránka komponenty a pracovní stůl

MotionHold

Stiskněte a podržte pro potvrzení; předčasné puštění vrátí stav zpět.

Prop	Typ	Výchozí	Popis
`children`	`ReactNode`		Popisek tlačítka.
`onConfirm`	`() => void`		Spustí se po dokončení podržení.
`duration`	`number`	`1200`	Milisekundy, po které je třeba stisk držet.
`disabled`	`boolean`	`false`	Vypne tlačítko.
`fillClassName`	`string`		Třída pro rostoucí výplň; `fillStyle` nastaví její inline styl.

Stránka komponenty a pracovní stůl

Překryvy

MotionSheet

Spodní nebo horní sheet či boční zásuvka se zarážkami.

Prop	Typ	Výchozí	Popis
`open`	`boolean`	`false`	Zda je sheet zobrazený.
`onOpenChange`	`(open) => void`		Spustí se s `false`, když se sheet zavře tažením, klepnutím nebo klávesou Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Klidové velikosti: zlomek obrazovky, pixely nebo `'content'`.
`detent`	`number`		Řízený index zarážky.
`defaultDetent`	`number`	`0`	Index zarážky při otevření bez `detent`.
`onDetentChange`	`(index) => void`		Spustí se s indexem zarážky, na které sheet dosedne.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Okraj, ze kterého sheet přichází.
`modal`	`boolean`	`true`	Přidá pozadí, drží fokus uvnitř a učiní stránku neaktivní.
`dismissible`	`boolean`	`true`	Zavře ho tažení za nejmenší zarážku, pozadí i Escape.
`backdropClassName`	`string`		Třída pro pozadí; `backdropStyle` nastaví jeho inline styl.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Stránka komponenty a pracovní stůl

MotionZoom

Obrázek, který se z místa, kde je, přiblíží, až vyplní obrazovku.

Prop	Typ	Výchozí	Popis
`src`	`string`		Obrázek zobrazený na místě.
`zoomSrc`	`string`		Větší obrázek zobrazený po načtení; zachovejte stejný poměr stran.
`margin`	`number`	`24`	Mezera kolem přiblíženého obrázku v pixelech.
`disabled`	`boolean`	`false`	Vypne přiblížení.
`onZoomChange`	`(zoomed) => void`		Spustí se s `true` při přiblížení a `false` při zavření.
`backdropStyle`	`CSSProperties`		Inline styl pozadí.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Stránka komponenty a pracovní stůl

Průběh

ProgressBar

Řízená čára průběhu s neurčitým stavem.

Prop	Typ	Výchozí	Popis
`value`	`number \| null`		Průběh od `0` do `max`; `null` je neurčitý.
`max`	`number`	`100`	Hodnota znamenající dokončení.
`color`	`string`	`'currentColor'`	Barva výplně.
`trackColor`	`string`	`'#e7ece9'`	Barva dráhy.
`thickness`	`number`	`8`	Tloušťka čáry v pixelech.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Plnění zleva (`ltr`) nebo zprava (`rtl`).
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Stránka komponenty a pracovní stůl

ProgressRing

Řízený kruh průběhu s neurčitým stavem.

Prop	Typ	Výchozí	Popis
`value`	`number \| null`		Průběh od `0` do `max`; `null` je neurčitý.
`max`	`number`	`100`	Hodnota znamenající dokončení.
`size`	`number`	`96`	Průměr v pixelech.
`thickness`	`number`	`8`	Tloušťka kruhu v pixelech.
`color`	`string`	`'currentColor'`	Barva oblouku.
`trackColor`	`string`	`'#e7ece9'`	Barva dráhy.
`children`	`ReactNode`		Popisek uprostřed.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Stránka komponenty a pracovní stůl

Přechody

motionTokens

Hotové hodnoty pro libovolnou prop transition.

Prop	Typ	Výchozí	Popis
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Délky v milisekundách.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Přechody timing s délkou a pojmenovanou křivkou.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Pružinové přechody, od rychlých a pevných po jemné a pružné.

Přechody

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