API-naslag

Elke export van @kkwaenggwari/animated-chorus met zijn props, types en standaardwaarden. Dezelfde namen werken op web en in React Native.

Filter17 API's

Getallen en tekst

MotionNumber

Een getal waarvan de cijfers rollen als wieltjes.

Prop	Type	Standaard	Beschrijving
`value`	`number \| bigint \| string`	`—`verplicht	Het getal, of door jou opgemaakte numerieke tekst.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` verplaatst elk gewijzigd cijfer één stap; `roll` gaat langs de tussenliggende cijfers.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` volgt de grootteverandering zodat overdrachten één kant op rollen; `digit` vergelijkt elk cijfer apart.
`stagger`	`number`	`45`	Milliseconden tussen gewijzigde cijfers, vanaf de eenheden naar buiten. De hele golf is begrensd.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Een functie die de te tonen tekst teruggeeft, of `Intl.NumberFormat`-opties (met `intl`).
`intl`	`boolean`	`false`	Gebruik de ingebouwde `Intl.NumberFormat`. Standaard uit, zodat geen enkele runtime `Intl` nodig heeft.
`locale`	`string \| string[]`		Locale voor `intl`.
`prefix`	`string`		Tekst voor het getal.
`suffix`	`string`		Tekst na het getal.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(value) => void`		Draait met de waarde zodra de cijfers tot rust zijn gekomen.

Componentpagina en werkbank

MotionText

Tekst die animeert als hij verandert: numerieke tekst rolt per cijfer, andere tekst wisselt.

Prop	Type	Standaard	Beschrijving
`children`	`ReactNode`		De te tonen tekst.
`as`	`element`	`'span'`	Het element dat wordt gerenderd.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(text) => void`		Draait als de beweging tot rust komt.

Componentpagina en werkbank

MotionStream

Gestreamde tekst die in een gelijkmatig tempo wordt onthuld en stoten bijbeent.

Prop	Type	Standaard	Beschrijving
`text`	`string`	`—`verplicht	De tekst tot nu toe. Groeiende tekst wordt gelijkmatig onthuld; een herschrijving gaat verder vanaf het gedeelde begin.
`speed`	`number`	`90`	Basistempo van onthullen in tekens per seconde.
`catchUp`	`number`	`900`	Een achterstand wordt binnen ongeveer zoveel milliseconden onthuld door te versnellen.
`initial`	`boolean`	`false`	Onthul ook de tekst die bij de mount al aanwezig is (anders verschijnt die direct).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` laat nieuwe tekens infaden; `none` toont ze direct.
`children`	`(visible: string) => ReactNode`		Een functie die de getimede tekst krijgt, bijvoorbeeld om Markdown te renderen.
`as`	`element`	`'span'`	Het element dat wordt gerenderd.
`onMotionComplete`	`(text) => void`		Draait elke keer dat de onthulling `text` heeft bijgebeend.

Componentpagina en werkbank

Inhoud en grootte

MotionSwap

Inhoud die overvloeit terwijl het element van grootte verandert.

Prop	Type	Standaard	Beschrijving
`value`	`unknown`		Identiteit van de inhoud; een nieuwe waarde wisselt. Kinderen met alleen tekst zijn hun eigen identiteit.
`children`	`ReactNode`		De inhoud.
`as`	`element`	`'span'`	Het element dat wordt gerenderd.
`inline`	`boolean`	`as === 'span'`	`true` past de grootte aan de inhoud aan (labels, iconen); `false` vult de breedte van de ouder en animeert de hoogte.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Waar de inhoud staat terwijl de grootte verandert.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hoe inhoud binnenkomt en vertrekt: `up` stijgt, `down` daalt, `scale` groeit.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(value) => void`		Draait als de beweging tot rust komt.

Componentpagina en werkbank

MotionHeight

Animeert de hoogte naar de inhoud: inklappen, uitklappen en inhoudswijzigingen.

Prop	Type	Standaard	Beschrijving
`open`	`boolean`	`true`	`false` klapt in tot hoogte nul; de inhoud blijft gemount maar verborgen en inert.
`children`	`ReactNode`		De inhoud.
`as`	`element`	`'div'`	Het element dat wordt gerenderd.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(open) => void`		Draait met `open` zodra de hoogte tot rust is gekomen.

Componentpagina en werkbank

MotionPresence

Houdt inhoud gemount terwijl die in- en uitanimeert.

Prop	Type	Standaard	Beschrijving
`present`	`boolean`	`—`verplicht	Toon of verberg de inhoud. Verander dit in plaats van te unmounten.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	De pose in rust.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	De pose waarmee de inhoud vertrekt en waaruit hij binnenkomt.
`as`	`element`	`'div'`	Het element dat wordt gerenderd.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onExitComplete`	`() => void`		Draait nadat de inhoud is vertrokken en verwijderd.

Componentpagina en werkbank

Selectie en pagina's

MotionHighlight

Items uit data met één markering die naar het geselecteerde item verhuist.

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`	`—`verplicht	Je data-array.
`value`	`key \| null`	`—`verplicht	Key van het gemarkeerde item; `null` verbergt de markering.
`onValueChange`	`(key, item) => void`		Draait met de key en het item als een item wordt ingedrukt.
`getKey`	`(item) => string \| number`	`item.id`	Geeft een unieke, stabiele key voor een item terug. Standaard `item.id`, of het item zelf bij strings en getallen.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Tekent een item; krijgt mee of het geselecteerd is.
`hover`	`boolean`	`false`	Volg de aanwijzer over items en keer bij verlaten terug naar `value` (web).
`itemAs`	`element`	`'button'`	Het element voor elk item.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.
`highlightClassName`	`string`		Class voor de markering; `highlightStyle` zet de inline style.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Componentpagina en werkbank

MotionPager

Veegbare pagina's uit data.

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`	`—`verplicht	Je data-array.
`index`	`number`		De getoonde pagina. Laat hem weg om de pager zijn eigen pagina te laten bijhouden.
`defaultIndex`	`number`	`0`	Startpagina als `index` niet gecontroleerd is.
`onIndexChange`	`(index, item) => void`		Draait met de index en het item zodra een veeg, toets of wielgebaar tot rust komt.
`getKey`	`(item) => string \| number`	`item.id`	Geeft een unieke, stabiele key voor een item terug. Standaard `item.id`, of het item zelf bij strings en getallen.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Tekent een pagina; krijgt de index en of hij actief is.
`gap`	`number`	`0`	Ruimte tussen pagina's in pixels.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Componentpagina en werkbank

Lijsten

MotionList

Een lijst met keys uit data die alleen animeert wat veranderde.

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`	`—`verplicht	Je data-array.
`getKey`	`(item) => string \| number`	`item.id`	Geeft een unieke, stabiele key voor een item terug. Standaard `item.id`, of het item zelf bij strings en getallen.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Tekent een item.
`as`	`element`	`'div'`	Het element dat wordt gerenderd.
`itemAs`	`element`	`'li' \| 'div'`	Het element voor elk item.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hoe items binnenkomen en vertrekken.
`distance`	`number`	`16`	Afstand van `rise` en `slide` in pixels.
`stagger`	`number`	`40`	Milliseconden tussen binnenkomende items.
`order`	`'forward' \| 'reverse'`	`'forward'`	Richting van de cascade.
`present`	`boolean`	`true`	`false` animeert elk item weg en behoudt de layout; `true` brengt ze terug.
`initial`	`boolean`	`true`	Speel het binnenkomen af als de lijst mount.
`playKey`	`string \| number`		Wijzigen speelt het binnenkomen opnieuw af.
`transition`	`Transition`	`spring`	Overgang voor binnenkomende en vertrekkende items.
`layoutTransition`	`Transition`	`spring`	Overgang voor items die naar een nieuwe plek glijden.

Componentpagina en werkbank

MotionReorder

Sleep om een lijst of raster te herordenen, met toetsenbordverplaatsingen.

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`		De items, als jij de volgorde beheert.
`defaultItems`	`readonly T[]`	`[]`	Startitems, als het component de volgorde bijhoudt.
`onItemsChange`	`(items, { reason, key }) => void`		Draait met de nieuwe volgorde en of die kwam van slepen, loslaten of het toetsenbord.
`getKey`	`(item) => string \| number`	`item`	Geeft een unieke key voor een item terug. Standaard het item zelf.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Tekent een item; krijgt de index en of het wordt gesleept.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` verplaatst andere items tijdens het slepen; `drop` wacht op het loslaten.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` of `grid`.
`columns`	`number`	`3`	Kolommen in een raster.
`gap`	`number`	`12`	Ruimte tussen items in pixels.
`disabled`	`boolean`	`false`	Zet slepen uit.
`duration`	`number`	`260`	Milliseconden voor items die opzij gaan.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.

Componentpagina en werkbank

Gebaren

MotionSwipe

Een rij die acties toont bij een horizontale veeg en kan worden weggeveegd.

Prop	Type	Standaard	Beschrijving
`children`	`ReactNode`		De inhoud van de rij.
`startActions`	`ReactNode`		Getoond aan het begin van de regel als de rij naar het einde wordt gesleept.
`endActions`	`ReactNode`		Getoond aan het einde van de regel als de rij naar het begin wordt gesleept.
`dismiss`	`'start' \| 'end' \| 'both'`		Kanten waar een lange veeg of worp de rij verwijdert.
`onDismiss`	`(side) => void`		Draait nadat de rij is weggeschoven en ingeklapt; verwijder hier het item uit je data.
`onOpenChange`	`(side \| null) => void`		Draait met de open kant, of `null` als de rij sluit.
`disabled`	`boolean`	`false`	Zet vegen uit.
`contentClassName`	`string`		Class voor de rij-inhoud; `contentStyle` zet de inline style.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Componentpagina en werkbank

MotionHold

Houd ingedrukt om te bevestigen; vroeg loslaten spoelt terug.

Prop	Type	Standaard	Beschrijving
`children`	`ReactNode`		Het knoplabel.
`onConfirm`	`() => void`		Draait zodra het vasthouden voltooid is.
`duration`	`number`	`1200`	Milliseconden dat de knop moet worden ingedrukt.
`disabled`	`boolean`	`false`	Zet de knop uit.
`fillClassName`	`string`		Class voor de groeiende vulling; `fillStyle` zet de inline style.

Componentpagina en werkbank

Overlays

MotionSheet

Een bottom sheet, top sheet of zijlade met stoppunten.

Prop	Type	Standaard	Beschrijving
`open`	`boolean`	`false`	Of de sheet wordt getoond.
`onOpenChange`	`(open) => void`		Draait met `false` als de sheet dichtgesleept, -getikt of met Escape gesloten wordt.
`detents`	`(number \| 'content')[]`	`['content']`	Rustgroottes: een fractie van het scherm, pixels of `'content'`.
`detent`	`number`		Gecontroleerde stoppuntindex.
`defaultDetent`	`number`	`0`	Stoppuntindex bij openen zonder `detent`.
`onDetentChange`	`(index) => void`		Draait met de index van het stoppunt waar de sheet tot rust komt.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	De rand waar de sheet vandaan komt.
`modal`	`boolean`	`true`	Voegt een achtergrond toe, houdt de focus binnen en maakt de pagina inert.
`dismissible`	`boolean`	`true`	Voorbij het kleinste stoppunt slepen, de achtergrond en Escape sluiten hem.
`backdropClassName`	`string`		Class voor de achtergrond; `backdropStyle` zet de inline style.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Componentpagina en werkbank

MotionZoom

Een afbeelding die vanaf haar plek zoomt tot ze het scherm vult.

Prop	Type	Standaard	Beschrijving
`src`	`string`		De afbeelding die op haar plek wordt getoond.
`zoomSrc`	`string`		Een grotere afbeelding die wordt getoond zodra ze is geladen; houd dezelfde beeldverhouding.
`margin`	`number`	`24`	Ruimte rond de ingezoomde afbeelding in pixels.
`disabled`	`boolean`	`false`	Zet zoomen uit.
`onZoomChange`	`(zoomed) => void`		Draait met `true` bij inzoomen en `false` bij sluiten.
`backdropStyle`	`CSSProperties`		Inline style voor de achtergrond.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Componentpagina en werkbank

Voortgang

ProgressBar

Een gecontroleerde voortgangslijn met een onbepaalde status.

Prop	Type	Standaard	Beschrijving
`value`	`number \| null`		Voortgang van `0` tot `max`; `null` is onbepaald.
`max`	`number`	`100`	De waarde die voltooid betekent.
`color`	`string`	`'currentColor'`	Vulkleur.
`trackColor`	`string`	`'#e7ece9'`	Kleur van de baan.
`thickness`	`number`	`8`	Lijndikte in pixels.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Vullen vanaf links (`ltr`) of vanaf rechts (`rtl`).
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Componentpagina en werkbank

ProgressRing

Een gecontroleerde voortgangsring met een onbepaalde status.

Prop	Type	Standaard	Beschrijving
`value`	`number \| null`		Voortgang van `0` tot `max`; `null` is onbepaald.
`max`	`number`	`100`	De waarde die voltooid betekent.
`size`	`number`	`96`	Diameter in pixels.
`thickness`	`number`	`8`	Ringdikte in pixels.
`color`	`string`	`'currentColor'`	Kleur van de boog.
`trackColor`	`string`	`'#e7ece9'`	Kleur van de baan.
`children`	`ReactNode`		Een label in het midden.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Componentpagina en werkbank

Overgangen

motionTokens

Kant-en-klare waarden voor elke transition-prop.

Prop	Type	Standaard	Beschrijving
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Duren in milliseconden.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Timingovergangen met een duur en een benoemde curve.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Veerovergangen, van snel en stevig tot zacht en verend.

Overgangen

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