API žinynas

Kiekvienas @kkwaenggwari/animated-chorus eksportas su props, tipais ir numatytosiomis reikšmėmis. Tie patys pavadinimai veikia žiniatinklyje ir React Native.

FiltrasAPI: 17

Skaičiai ir tekstas

MotionNumber

Skaičius, kurio skaitmenys sukasi kaip ratukai.

Prop	Tipas	Numatytoji	Aprašymas
`value`	`number \| bigint \| string`	`—`privaloma	Skaičius arba kviečiančiojo suformatuotas skaitinis tekstas.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` kiekvieną pasikeitusį skaitmenį perkelia vienu žingsniu; `roll` pereina per tarpinius skaitmenis.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` seka dydžio pokytį, kad perkėlimai suktųsi viena kryptimi; `digit` kiekvieną skaitmenį lygina atskirai.
`stagger`	`number`	`45`	Milisekundės tarp pasikeitusių skaitmenų, nuo vienetų į išorę. Visa banga yra ribota.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcija, grąžinanti rodomą tekstą, arba `Intl.NumberFormat` parinktys (su `intl`).
`intl`	`boolean`	`false`	Naudoti integruotą `Intl.NumberFormat`. Pagal numatymą išjungta, kad jokiai vykdymo aplinkai nereikėtų `Intl`.
`locale`	`string \| string[]`		Lokalė `intl`.
`prefix`	`string`		Tekstas prieš skaičių.
`suffix`	`string`		Tekstas po skaičiaus.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(value) => void`		Vykdomas su reikšme, kai skaitmenys nusistovi.

Komponento puslapis ir darbo stalas

MotionText

Tekstas, animuojamas pasikeitus: skaitinis tekstas sukasi pagal skaitmenis, kitas tekstas pakeičiamas.

Prop	Tipas	Numatytoji	Aprašymas
`children`	`ReactNode`		Rodomas tekstas.
`as`	`element`	`'span'`	Atvaizduojamas elementas.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(text) => void`		Vykdomas, kai judesys nusistovi.

Komponento puslapis ir darbo stalas

MotionStream

Srautinis tekstas, rodomas pastoviu tempu, kuris pasiveja pliūpsnius.

Prop	Tipas	Numatytoji	Aprašymas
`text`	`string`	`—`privaloma	Iki šiol gautas tekstas. Augantis tekstas rodomas pastoviu tempu; perrašymas tęsiasi nuo bendros pradžios.
`speed`	`number`	`90`	Bazinis rodymo greitis simboliais per sekundę.
`catchUp`	`number`	`900`	Atsilikimas parodomas pagreitinant maždaug per tiek milisekundžių.
`initial`	`boolean`	`false`	Palaipsniui rodyti ir prijungimo metu esantį tekstą (kitaip jis parodomas iškart).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` palaipsniui išryškina naujus simbolius; `none` juos parodo iškart.
`children`	`(visible: string) => ReactNode`		Funkcija, gaunanti tempu išdėliotą tekstą, pavyzdžiui, Markdown atvaizdavimui.
`as`	`element`	`'span'`	Atvaizduojamas elementas.
`onMotionComplete`	`(text) => void`		Vykdomas kaskart, kai rodymas pasiveja `text`.

Komponento puslapis ir darbo stalas

Turinys ir dydis

MotionSwap

Turinys, kuris persilieja, kol elementas keičia dydį.

Prop	Tipas	Numatytoji	Aprašymas
`value`	`unknown`		Turinio tapatybė; nauja reikšmė sukelia pakeitimą. Paprasto teksto vaikai patys yra savo tapatybė.
`children`	`ReactNode`		Turinys.
`as`	`element`	`'span'`	Atvaizduojamas elementas.
`inline`	`boolean`	`as === 'span'`	`true` pritaiko dydį turiniui (etiketės, piktogramos); `false` užpildo tėvinio elemento plotį ir animuoja aukštį.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Kur yra turinys, kol keičiasi dydis.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Kaip turinys įeina ir išeina: `up` kyla, `down` krenta, `scale` didėja.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(value) => void`		Vykdomas, kai judesys nusistovi.

Komponento puslapis ir darbo stalas

MotionHeight

Animuoja aukštį pagal turinį: sutraukimas, išskleidimas ir turinio pokyčiai.

Prop	Tipas	Numatytoji	Aprašymas
`open`	`boolean`	`true`	`false` sutraukia iki nulinio aukščio; turinys lieka prijungtas, bet paslėptas ir neaktyvus.
`children`	`ReactNode`		Turinys.
`as`	`element`	`'div'`	Atvaizduojamas elementas.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(open) => void`		Vykdomas su `open`, kai aukštis nusistovi.

Komponento puslapis ir darbo stalas

MotionPresence

Išlaiko turinį prijungtą, kol jis animuojamas į vidų ir į išorę.

Prop	Tipas	Numatytoji	Aprašymas
`present`	`boolean`	`—`privaloma	Rodyti ar slėpti turinį. Keiskite tai, užuot atjungę.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Poza ramybės būsenoje.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Poza, su kuria turinys išeina ir iš kurios įeina.
`as`	`element`	`'div'`	Atvaizduojamas elementas.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onExitComplete`	`() => void`		Vykdomas turiniui išėjus ir jį pašalinus.

Komponento puslapis ir darbo stalas

Pasirinkimas ir puslapiavimas

MotionHighlight

Elementai iš duomenų su vienu paryškinimu, keliaujančiu prie pasirinkto elemento.

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`	`—`privaloma	Jūsų duomenų masyvas.
`value`	`key \| null`	`—`privaloma	Paryškinto elemento key; `null` paslepia paryškinimą.
`onValueChange`	`(key, item) => void`		Vykdomas su key ir elementu, kai elementas paspaudžiamas.
`getKey`	`(item) => string \| number`	`item.id`	Grąžina unikalų, stabilų elemento key. Pagal numatymą `item.id` arba pats elementas eilutėms ir skaičiams.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Nupiešia elementą; gauna, ar jis pasirinktas.
`hover`	`boolean`	`false`	Seka žymeklį virš elementų ir išėjus grįžta prie `value` (žiniatinklis).
`itemAs`	`element`	`'button'`	Kiekvieno elemento apvalkalas.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.
`highlightClassName`	`string`		Paryškinimo klasė; `highlightStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Komponento puslapis ir darbo stalas

MotionPager

Braukiami puslapiai iš duomenų.

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`	`—`privaloma	Jūsų duomenų masyvas.
`index`	`number`		Rodomas puslapis. Praleiskite, kad puslapiuotuvas jį valdytų pats.
`defaultIndex`	`number`	`0`	Pradinis puslapis, kai `index` nevaldomas.
`onIndexChange`	`(index, item) => void`		Vykdomas su indeksu ir elementu, vos nusistovi braukimas, klavišas ar ratuko gestas.
`getKey`	`(item) => string \| number`	`item.id`	Grąžina unikalų, stabilų elemento key. Pagal numatymą `item.id` arba pats elementas eilutėms ir skaičiams.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Nupiešia puslapį; gauna jo indeksą ir ar jis aktyvus.
`gap`	`number`	`0`	Tarpas tarp puslapių pikseliais.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Komponento puslapis ir darbo stalas

Sąrašai

MotionList

Sąrašas su key iš duomenų, animuojantis tik tai, kas pasikeitė.

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`	`—`privaloma	Jūsų duomenų masyvas.
`getKey`	`(item) => string \| number`	`item.id`	Grąžina unikalų, stabilų elemento key. Pagal numatymą `item.id` arba pats elementas eilutėms ir skaičiams.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Nupiešia elementą.
`as`	`element`	`'div'`	Atvaizduojamas elementas.
`itemAs`	`element`	`'li' \| 'div'`	Kiekvieno elemento apvalkalas.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Kaip elementai įeina ir išeina.
`distance`	`number`	`16`	`rise` ir `slide` atstumas pikseliais.
`stagger`	`number`	`40`	Milisekundės tarp įeinančių elementų.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskados kryptis.
`present`	`boolean`	`true`	`false` animuoja visų elementų išėjimą išlaikydamas išdėstymą; `true` juos grąžina.
`initial`	`boolean`	`true`	Groti įėjimą, kai sąrašas prijungiamas.
`playKey`	`string \| number`		Jį pakeitus įėjimas grojamas iš naujo.
`transition`	`Transition`	`spring`	Perėjimas įeinantiems ir išeinantiems elementams.
`layoutTransition`	`Transition`	`spring`	Perėjimas elementams, slystantiems į naujas vietas.

Komponento puslapis ir darbo stalas

MotionReorder

Vilkite, kad pertvarkytumėte sąrašą ar tinklelį, su perkėlimais klaviatūra.

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`		Elementai, kai tvarką valdote jūs.
`defaultItems`	`readonly T[]`	`[]`	Pradiniai elementai, kai tvarką laiko komponentas.
`onItemsChange`	`(items, { reason, key }) => void`		Vykdomas su nauja tvarka ir nurodo, ar ji atėjo iš vilkimo, paleidimo ar klaviatūros.
`getKey`	`(item) => string \| number`	`item`	Grąžina unikalų elemento key. Pagal numatymą pats elementas.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Nupiešia elementą; gauna jo indeksą ir ar jis velkamas.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` vilkimo metu judina kitus elementus; `drop` laukia paleidimo.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` arba `grid`.
`columns`	`number`	`3`	Stulpeliai tinklelyje.
`gap`	`number`	`12`	Tarpas tarp elementų pikseliais.
`disabled`	`boolean`	`false`	Išjungia vilkimą.
`duration`	`number`	`260`	Milisekundės pasitraukiantiems elementams.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.

Komponento puslapis ir darbo stalas

Gestai

MotionSwipe

Eilutė, kuri horizontaliu braukimu atskleidžia veiksmus ir gali būti nubraukta.

Prop	Tipas	Numatytoji	Aprašymas
`children`	`ReactNode`		Eilutės turinys.
`startActions`	`ReactNode`		Atskleidžiami eilutės pradžioje, kai eilutė velkama link galo.
`endActions`	`ReactNode`		Atskleidžiami eilutės gale, kai eilutė velkama link pradžios.
`dismiss`	`'start' \| 'end' \| 'both'`		Pusės, kuriose ilgas braukimas ar metimas pašalina eilutę.
`onDismiss`	`(side) => void`		Vykdomas eilutei išslinkus ir susitraukus; čia pašalinkite elementą iš savo duomenų.
`onOpenChange`	`(side \| null) => void`		Vykdomas su atidaryta puse arba `null`, kai eilutė užsidaro.
`disabled`	`boolean`	`false`	Išjungia braukimą.
`contentClassName`	`string`		Eilutės turinio klasė; `contentStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Komponento puslapis ir darbo stalas

MotionHold

Paspauskite ir palaikykite, kad patvirtintumėte; per anksti paleidus atsukama atgal.

Prop	Tipas	Numatytoji	Aprašymas
`children`	`ReactNode`		Mygtuko etiketė.
`onConfirm`	`() => void`		Vykdomas, kai palaikymas baigtas.
`duration`	`number`	`1200`	Kiek milisekundžių reikia laikyti paspaudus.
`disabled`	`boolean`	`false`	Išjungia mygtuką.
`fillClassName`	`string`		Augančio užpildo klasė; `fillStyle` nustato jo vidinį stilių.

Komponento puslapis ir darbo stalas

Perdangos

MotionSheet

Apatinis sheet, viršutinis sheet ar šoninis stalčius su sustojimo taškais.

Prop	Tipas	Numatytoji	Aprašymas
`open`	`boolean`	`false`	Ar sheet rodomas.
`onOpenChange`	`(open) => void`		Vykdomas su `false`, kai sheet uždaromas vilkimu, bakstelėjimu ar Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Ramybės dydžiai: ekrano dalis, pikseliai arba `'content'`.
`detent`	`number`		Valdomas sustojimo taško indeksas.
`defaultDetent`	`number`	`0`	Sustojimo taško indeksas, naudojamas atidarant be `detent`.
`onDetentChange`	`(index) => void`		Vykdomas su sustojimo taško, kuriame nusistovi sheet, indeksu.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Kraštas, iš kurio ateina sheet.
`modal`	`boolean`	`true`	Prideda foną, laiko fokusą viduje ir padaro puslapį neaktyvų.
`dismissible`	`boolean`	`true`	Vilkimas už mažiausio sustojimo taško, fonas ir Escape jį uždaro.
`backdropClassName`	`string`		Fono klasė; `backdropStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Komponento puslapis ir darbo stalas

MotionZoom

Paveikslėlis, kuris padidinamas nuo savo vietos, kol užpildo ekraną.

Prop	Tipas	Numatytoji	Aprašymas
`src`	`string`		Vietoje rodomas paveikslėlis.
`zoomSrc`	`string`		Didesnis paveikslėlis, rodomas įsikėlus; išlaikykite tą patį kraštinių santykį.
`margin`	`number`	`24`	Tarpas aplink padidintą paveikslėlį pikseliais.
`disabled`	`boolean`	`false`	Išjungia didinimą.
`onZoomChange`	`(zoomed) => void`		Vykdomas su `true` padidinus ir `false` uždarius.
`backdropStyle`	`CSSProperties`		Fono vidinis stilius.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Komponento puslapis ir darbo stalas

Eiga

ProgressBar

Valdoma eigos linija su neapibrėžta būsena.

Prop	Tipas	Numatytoji	Aprašymas
`value`	`number \| null`		Eiga nuo `0` iki `max`; `null` reiškia neapibrėžtą.
`max`	`number`	`100`	Reikšmė, reiškianti užbaigta.
`color`	`string`	`'currentColor'`	Užpildo spalva.
`trackColor`	`string`	`'#e7ece9'`	Takelio spalva.
`thickness`	`number`	`8`	Linijos storis pikseliais.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Pildoma iš kairės (`ltr`) arba iš dešinės (`rtl`).
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Komponento puslapis ir darbo stalas

ProgressRing

Valdomas eigos žiedas su neapibrėžta būsena.

Prop	Tipas	Numatytoji	Aprašymas
`value`	`number \| null`		Eiga nuo `0` iki `max`; `null` reiškia neapibrėžtą.
`max`	`number`	`100`	Reikšmė, reiškianti užbaigta.
`size`	`number`	`96`	Skersmuo pikseliais.
`thickness`	`number`	`8`	Žiedo storis pikseliais.
`color`	`string`	`'currentColor'`	Lanko spalva.
`trackColor`	`string`	`'#e7ece9'`	Takelio spalva.
`children`	`ReactNode`		Centre rodoma etiketė.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Komponento puslapis ir darbo stalas

Perėjimai

motionTokens

Paruoštos reikšmės bet kuriam transition prop.

Prop	Tipas	Numatytoji	Aprašymas
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Trukmės milisekundėmis.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	timing perėjimai su trukme ir pavadinta kreive.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Spyruokliniai perėjimai – nuo greitų ir tvirtų iki švelnių ir šokinėjančių.

Perėjimai

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