API-viite

Jokainen @kkwaenggwari/animated-chorus-paketin export props-arvoineen, tyyppeineen ja oletusarvoineen. Samat nimet toimivat webissä ja React Nativessa.

Suodatin17 API-rajapintaa

Numerot ja teksti

MotionNumber

Luku, jonka numeropaikat pyörivät kuin rullat.

Prop	Tyyppi	Oletus	Kuvaus
`value`	`number \| bigint \| string`	`—`pakollinen	Luku tai kutsujan muotoilema numeerinen teksti.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` siirtää jokaista muuttunutta numeropaikkaa yhden askeleen; `roll` kulkee välissä olevien numeroiden kautta.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` seuraa suuruuden muutosta, jotta muistinumerot pyörivät yhteen suuntaan; `digit` vertaa jokaista numeropaikkaa erikseen.
`stagger`	`number`	`45`	Millisekunnit muuttuneiden numeropaikkojen välillä ykkösistä ulospäin. Koko aalto on rajattu.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funktio, joka palauttaa näytettävän tekstin, tai `Intl.NumberFormat`-asetukset (`intl`-asetuksen kanssa).
`intl`	`boolean`	`false`	Käytä sisäänrakennettua `Intl.NumberFormat`-rajapintaa. Oletuksena pois päältä, jotta mikään ajoympäristö ei tarvitse `Intl`-rajapintaa.
`locale`	`string \| string[]`		Lokaali `intl`-asetukselle.
`prefix`	`string`		Teksti ennen lukua.
`suffix`	`string`		Teksti luvun jälkeen.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onMotionComplete`	`(value) => void`		Suoritetaan arvon kanssa, kun numeropaikat ovat asettuneet.

Komponenttisivu ja työpöytä

MotionText

Muuttuessaan animoituva teksti: numeerinen teksti pyörii numeropaikoittain, muu teksti vaihtuu.

Prop	Tyyppi	Oletus	Kuvaus
`children`	`ReactNode`		Näytettävä teksti.
`as`	`element`	`'span'`	Renderöitävä elementti.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onMotionComplete`	`(text) => void`		Suoritetaan, kun liike asettuu.

Komponenttisivu ja työpöytä

MotionStream

Tasaisella tahdilla näytettävä virtaava teksti, joka saa purskeet kiinni.

Prop	Tyyppi	Oletus	Kuvaus
`text`	`string`	`—`pakollinen	Teksti tähän mennessä. Kasvava teksti näytetään tasaisella tahdilla; uudelleenkirjoitus jatkaa yhteisestä alusta.
`speed`	`number`	`90`	Perusnäyttönopeus merkkeinä sekunnissa.
`catchUp`	`number`	`900`	Jäljessä oleva osa näytetään nopeuttamalla noin näin monessa millisekunnissa.
`initial`	`boolean`	`false`	Näytä asteittain myös kiinnityshetkellä olemassa oleva teksti (muuten se näkyy heti).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` häivyttää uudet merkit esiin; `none` näyttää ne suoraan.
`children`	`(visible: string) => ReactNode`		Funktio, joka saa tahdistetun tekstin, esimerkiksi Markdownin renderöimiseen.
`as`	`element`	`'span'`	Renderöitävä elementti.
`onMotionComplete`	`(text) => void`		Suoritetaan aina, kun näyttäminen saavuttaa `text`-arvon.

Komponenttisivu ja työpöytä

Sisältö ja koko

MotionSwap

Sisältö, joka ristihäivyttyy elementin muuttaessa kokoaan.

Prop	Tyyppi	Oletus	Kuvaus
`value`	`unknown`		Sisällön identiteetti; uusi arvo käynnistää vaihdon. Pelkkää tekstiä olevat lapset ovat oma identiteettinsä.
`children`	`ReactNode`		Sisältö.
`as`	`element`	`'span'`	Renderöitävä elementti.
`inline`	`boolean`	`as === 'span'`	`true` mitoittaa sisällön mukaan (nimikkeet, kuvakkeet); `false` täyttää vanhemman leveyden ja animoi korkeutta.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Missä sisältö on koon muuttuessa.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Miten sisältö saapuu ja poistuu: `up` nousee, `down` laskee, `scale` kasvaa.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onMotionComplete`	`(value) => void`		Suoritetaan, kun liike asettuu.

Komponenttisivu ja työpöytä

MotionHeight

Animoi korkeuden sisältöön: tiivistäminen, laajentaminen ja sisällön muutokset.

Prop	Tyyppi	Oletus	Kuvaus
`open`	`boolean`	`true`	`false` tiivistää nollakorkeuteen; sisältö pysyy kiinnitettynä mutta piilotettuna ja passiivisena.
`children`	`ReactNode`		Sisältö.
`as`	`element`	`'div'`	Renderöitävä elementti.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onMotionComplete`	`(open) => void`		Suoritetaan `open`-arvon kanssa, kun korkeus on asettunut.

Komponenttisivu ja työpöytä

MotionPresence

Pitää sisällön kiinnitettynä, kun se animoituu sisään ja ulos.

Prop	Tyyppi	Oletus	Kuvaus
`present`	`boolean`	`—`pakollinen	Näyttää tai piilottaa sisällön. Muuta tätä irrottamisen sijaan.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Asento levossa.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Asento, jolla sisältö poistuu ja josta se saapuu.
`as`	`element`	`'div'`	Renderöitävä elementti.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onExitComplete`	`() => void`		Suoritetaan, kun sisältö on poistunut ja se on poistettu.

Komponenttisivu ja työpöytä

Valinta ja sivutus

MotionHighlight

Kohteet datasta ja yksi korostus, joka siirtyy valittuun kohteeseen.

Prop	Tyyppi	Oletus	Kuvaus
`items`	`readonly T[]`	`—`pakollinen	Datataulukkosi.
`value`	`key \| null`	`—`pakollinen	Korostetun kohteen key; `null` piilottaa korostuksen.
`onValueChange`	`(key, item) => void`		Suoritetaan keyn ja kohteen kanssa, kun kohdetta painetaan.
`getKey`	`(item) => string \| number`	`item.id`	Palauttaa kohteelle yksilöllisen, vakaan keyn. Oletuksena `item.id`, merkkijonoille ja luvuille kohde itse.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Piirtää kohteen; saa tiedon, onko se valittu.
`hover`	`boolean`	`false`	Seuraa osoitinta kohteiden yllä ja palaa poistuttaessa `value`-arvoon (web).
`itemAs`	`element`	`'button'`	Kunkin kohteen elementti.
`itemClassName`	`string`		Luokka kullekin kohde-elementille; `itemStyle` asettaa sen inline-tyylin.
`highlightClassName`	`string`		Luokka korostukselle; `highlightStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Komponenttisivu ja työpöytä

MotionPager

Pyyhkäistävät sivut datasta.

Prop	Tyyppi	Oletus	Kuvaus
`items`	`readonly T[]`	`—`pakollinen	Datataulukkosi.
`index`	`number`		Näytettävä sivu. Jätä pois, jotta sivuttaja pitää omansa.
`defaultIndex`	`number`	`0`	Aloitussivu, kun `index` ei ole ohjattu.
`onIndexChange`	`(index, item) => void`		Suoritetaan indeksin ja kohteen kanssa heti, kun pyyhkäisy, näppäin tai rullaele asettuu.
`getKey`	`(item) => string \| number`	`item.id`	Palauttaa kohteelle yksilöllisen, vakaan keyn. Oletuksena `item.id`, merkkijonoille ja luvuille kohde itse.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Piirtää sivun; saa sen indeksin ja tiedon, onko se aktiivinen.
`gap`	`number`	`0`	Sivujen välinen tila pikseleinä.
`itemClassName`	`string`		Luokka kullekin kohde-elementille; `itemStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Komponenttisivu ja työpöytä

Listat

MotionList

Keyllinen lista datasta, joka animoi vain muuttuneen.

Prop	Tyyppi	Oletus	Kuvaus
`items`	`readonly T[]`	`—`pakollinen	Datataulukkosi.
`getKey`	`(item) => string \| number`	`item.id`	Palauttaa kohteelle yksilöllisen, vakaan keyn. Oletuksena `item.id`, merkkijonoille ja luvuille kohde itse.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Piirtää kohteen.
`as`	`element`	`'div'`	Renderöitävä elementti.
`itemAs`	`element`	`'li' \| 'div'`	Kunkin kohteen elementti.
`itemClassName`	`string`		Luokka kullekin kohde-elementille; `itemStyle` asettaa sen inline-tyylin.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Miten kohteet saapuvat ja poistuvat.
`distance`	`number`	`16`	`rise`- ja `slide`-liikkeen matka pikseleinä.
`stagger`	`number`	`40`	Millisekunnit saapuvien kohteiden välillä.
`order`	`'forward' \| 'reverse'`	`'forward'`	Porrastuksen suunta.
`present`	`boolean`	`true`	`false` animoi jokaisen kohteen ulos asettelun säilyttäen; `true` tuo ne takaisin.
`initial`	`boolean`	`true`	Toista saapuminen, kun lista kiinnitetään.
`playKey`	`string \| number`		Sen muuttaminen toistaa saapumisen uudelleen.
`transition`	`Transition`	`spring`	Siirtymä saapuville ja poistuville kohteille.
`layoutTransition`	`Transition`	`spring`	Siirtymä uusiin sijainteihin liukuville kohteille.

Komponenttisivu ja työpöytä

MotionReorder

Listan tai ruudukon järjestäminen vetämällä, näppäimistösiirroin.

Prop	Tyyppi	Oletus	Kuvaus
`items`	`readonly T[]`		Kohteet, kun ohjaat järjestystä itse.
`defaultItems`	`readonly T[]`	`[]`	Aloituskohteet, kun komponentti pitää järjestyksen.
`onItemsChange`	`(items, { reason, key }) => void`		Suoritetaan uuden järjestyksen kanssa ja kertoo, tuliko se vedosta, pudotuksesta vai näppäimistöltä.
`getKey`	`(item) => string \| number`	`item`	Palauttaa kohteelle yksilöllisen keyn. Oletuksena kohde itse.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Piirtää kohteen; saa sen indeksin ja tiedon, vedetäänkö sitä.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` siirtää muita kohteita vedon aikana; `drop` odottaa pudotusta.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` tai `grid`.
`columns`	`number`	`3`	Ruudukon sarakkeet.
`gap`	`number`	`12`	Kohteiden välinen tila pikseleinä.
`disabled`	`boolean`	`false`	Poistaa vetämisen käytöstä.
`duration`	`number`	`260`	Millisekunnit väistäville kohteille.
`itemClassName`	`string`		Luokka kullekin kohde-elementille; `itemStyle` asettaa sen inline-tyylin.

Komponenttisivu ja työpöytä

Eleet

MotionSwipe

Rivi, joka paljastaa toiminnot vaakapyyhkäisyllä ja voidaan pyyhkäistä pois.

Prop	Tyyppi	Oletus	Kuvaus
`children`	`ReactNode`		Rivin sisältö.
`startActions`	`ReactNode`		Paljastuvat rivin alussa, kun riviä vedetään loppua kohti.
`endActions`	`ReactNode`		Paljastuvat rivin lopussa, kun riviä vedetään alkua kohti.
`dismiss`	`'start' \| 'end' \| 'both'`		Puolet, joilla pitkä pyyhkäisy tai heitto poistaa rivin.
`onDismiss`	`(side) => void`		Suoritetaan, kun rivi on liukunut ulos ja tiivistynyt; poista kohde datastasi tässä.
`onOpenChange`	`(side \| null) => void`		Suoritetaan avatun puolen kanssa tai `null`-arvolla, kun rivi sulkeutuu.
`disabled`	`boolean`	`false`	Poistaa pyyhkäisyn käytöstä.
`contentClassName`	`string`		Luokka rivin sisällölle; `contentStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Komponenttisivu ja työpöytä

MotionHold

Vahvista painamalla pitkään; liian aikainen irrotus kelaa takaisin.

Prop	Tyyppi	Oletus	Kuvaus
`children`	`ReactNode`		Painikkeen nimike.
`onConfirm`	`() => void`		Suoritetaan, kun pitkä painallus on valmis.
`duration`	`number`	`1200`	Millisekunnit, joiden ajan painallusta on pidettävä.
`disabled`	`boolean`	`false`	Poistaa painikkeen käytöstä.
`fillClassName`	`string`		Luokka kasvavalle täytölle; `fillStyle` asettaa sen inline-tyylin.

Komponenttisivu ja työpöytä

Peitot

MotionSheet

Alasheet, yläsheet tai sivulaatikko pysähdyskohdilla.

Prop	Tyyppi	Oletus	Kuvaus
`open`	`boolean`	`false`	Näytetäänkö sheet.
`onOpenChange`	`(open) => void`		Suoritetaan `false`-arvolla, kun sheet suljetaan vetämällä, napauttamalla tai Escillä.
`detents`	`(number \| 'content')[]`	`['content']`	Lepokoot: näytön osuus, pikselit tai `'content'`.
`detent`	`number`		Ohjattu pysähdyskohdan indeksi.
`defaultDetent`	`number`	`0`	Pysähdyskohdan indeksi, jota käytetään avattaessa ilman `detent`-arvoa.
`onDetentChange`	`(index) => void`		Suoritetaan sen pysähdyskohdan indeksillä, johon sheet asettuu.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Reuna, jolta sheet tulee.
`modal`	`boolean`	`true`	Lisää taustan, pitää kohdistuksen sisällä ja tekee sivusta passiivisen.
`dismissible`	`boolean`	`true`	Vetäminen pienimmän pysähdyskohdan ohi, tausta ja Esc sulkevat sen.
`backdropClassName`	`string`		Luokka taustalle; `backdropStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Komponenttisivu ja työpöytä

MotionZoom

Kuva, joka zoomautuu paikaltaan täyttämään näytön.

Prop	Tyyppi	Oletus	Kuvaus
`src`	`string`		Paikallaan näytettävä kuva.
`zoomSrc`	`string`		Suurempi kuva, joka näytetään latauduttuaan; säilytä sama kuvasuhde.
`margin`	`number`	`24`	Zoomatun kuvan ympärille jätettävä tila pikseleinä.
`disabled`	`boolean`	`false`	Poistaa zoomauksen käytöstä.
`onZoomChange`	`(zoomed) => void`		Suoritetaan `true`-arvolla zoomattaessa ja `false`-arvolla suljettaessa.
`backdropStyle`	`CSSProperties`		Taustan inline-tyyli.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Komponenttisivu ja työpöytä

Edistyminen

ProgressBar

Ohjattu edistymisviiva määrittämättömällä tilalla.

Prop	Tyyppi	Oletus	Kuvaus
`value`	`number \| null`		Edistyminen väliltä `0`–`max`; `null` on määrittämätön.
`max`	`number`	`100`	Arvo, joka tarkoittaa valmista.
`color`	`string`	`'currentColor'`	Täytön väri.
`trackColor`	`string`	`'#e7ece9'`	Raidan väri.
`thickness`	`number`	`8`	Viivan paksuus pikseleinä.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Täyttö vasemmalta (`ltr`) tai oikealta (`rtl`).
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Komponenttisivu ja työpöytä

ProgressRing

Ohjattu edistymisrengas määrittämättömällä tilalla.

Prop	Tyyppi	Oletus	Kuvaus
`value`	`number \| null`		Edistyminen väliltä `0`–`max`; `null` on määrittämätön.
`max`	`number`	`100`	Arvo, joka tarkoittaa valmista.
`size`	`number`	`96`	Halkaisija pikseleinä.
`thickness`	`number`	`8`	Renkaan paksuus pikseleinä.
`color`	`string`	`'currentColor'`	Kaaren väri.
`trackColor`	`string`	`'#e7ece9'`	Raidan väri.
`children`	`ReactNode`		Keskellä näytettävä nimike.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Komponenttisivu ja työpöytä

Siirtymät

motionTokens

Valmiit arvot mille tahansa transition-propsille.

Prop	Tyyppi	Oletus	Kuvaus
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Kestot millisekunteina.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Timing-siirtymät kestolla ja nimetyllä käyrällä.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Jousisiirtymät nopeista ja jämäköistä pehmeisiin ja pomppiviin.

Siirtymät

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