API-reference

Hver export i @kkwaenggwari/animated-chorus med props, typer og standardværdier. De samme navne virker på nettet og i React Native.

Filter17 API'er

Tal og tekst

MotionNumber

Et tal, hvis pladser ruller som hjul.

Prop	Type	Standard	Beskrivelse
`value`	`number \| bigint \| string`	`—`påkrævet	Tallet eller numerisk tekst, som du har formateret.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` flytter hver ændret plads ét trin; `roll` passerer cifrene imellem.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` følger størrelsesændringen, så mente ruller i én retning; `digit` sammenligner hver plads for sig.
`stagger`	`number`	`45`	Millisekunder mellem ændrede pladser, fra enerne og udad. Hele bølgen er begrænset.
`format`	`(value) => string \| Intl.NumberFormatOptions`		En funktion, der returnerer teksten, der skal vises, eller `Intl.NumberFormat`-indstillinger (med `intl`).
`intl`	`boolean`	`false`	Brug den indbyggede `Intl.NumberFormat`. Slået fra som standard, så intet runtime kræver `Intl`.
`locale`	`string \| string[]`		Locale til `intl`.
`prefix`	`string`		Tekst før tallet.
`suffix`	`string`		Tekst efter tallet.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(value) => void`		Kører med værdien, når pladserne er landet.

Komponentside og arbejdsbænk

MotionText

Tekst, der animeres, når den ændrer sig: numerisk tekst ruller pr. plads, anden tekst skiftes.

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Teksten, der skal vises.
`as`	`element`	`'span'`	Elementet, der renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(text) => void`		Kører, når bevægelsen lander.

Komponentside og arbejdsbænk

MotionStream

Streamet tekst, der vises i et jævnt tempo og indhenter stød.

Prop	Type	Standard	Beskrivelse
`text`	`string`	`—`påkrævet	Teksten indtil nu. Voksende tekst vises i et jævnt tempo; en omskrivning fortsætter fra den fælles begyndelse.
`speed`	`number`	`90`	Grundtempo for visning i tegn pr. sekund.
`catchUp`	`number`	`900`	Et efterslæb vises inden for cirka så mange millisekunder ved at sætte tempoet op.
`initial`	`boolean`	`false`	Vis også teksten, der findes ved mount (ellers vises den med det samme).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` toner nye tegn ind; `none` viser dem direkte.
`children`	`(visible: string) => ReactNode`		En funktion, der får den taktede tekst, for eksempel til at rendere Markdown.
`as`	`element`	`'span'`	Elementet, der renderes.
`onMotionComplete`	`(text) => void`		Kører, hver gang visningen har indhentet `text`.

Komponentside og arbejdsbænk

Indhold og størrelse

MotionSwap

Indhold, der krydstoner, mens elementet ændrer størrelse.

Prop	Type	Standard	Beskrivelse
`value`	`unknown`		Indholdets identitet; en ny værdi skifter. Børn, der kun er tekst, er deres egen identitet.
`children`	`ReactNode`		Indholdet.
`as`	`element`	`'span'`	Elementet, der renderes.
`inline`	`boolean`	`as === 'span'`	`true` tilpasser størrelsen til indholdet (etiketter, ikoner); `false` fylder forælderens bredde og animerer højden.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Hvor indholdet sidder, mens størrelsen ændrer sig.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hvordan indhold kommer ind og forlader: `up` stiger, `down` falder, `scale` vokser.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(value) => void`		Kører, når bevægelsen lander.

Komponentside og arbejdsbænk

MotionHeight

Animerer højden til indholdet: fold sammen, fold ud og indholdsændringer.

Prop	Type	Standard	Beskrivelse
`open`	`boolean`	`true`	`false` folder sammen til højden nul; indholdet forbliver monteret, men skjult og inert.
`children`	`ReactNode`		Indholdet.
`as`	`element`	`'div'`	Elementet, der renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(open) => void`		Kører med `open`, når højden er landet.

Komponentside og arbejdsbænk

MotionPresence

Holder indhold monteret, mens det animeres ind og ud.

Prop	Type	Standard	Beskrivelse
`present`	`boolean`	`—`påkrævet	Vis eller skjul indholdet. Ændr dette i stedet for at afmontere.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Posen i hvile.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Posen, som indholdet forlader med og kommer ind fra.
`as`	`element`	`'div'`	Elementet, der renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onExitComplete`	`() => void`		Kører, efter at indholdet er forladt og fjernet.

Komponentside og arbejdsbænk

Valg og sider

MotionHighlight

Elementer fra data med én markering, der flytter til det valgte element.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrævet	Dit data-array.
`value`	`key \| null`	`—`påkrævet	Nøglen for det markerede element; `null` skjuler markeringen.
`onValueChange`	`(key, item) => void`		Kører med nøglen og elementet, når et element trykkes.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøgle for et element. Standard er `item.id`, eller selve elementet for strenge og tal.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Tegner et element; får at vide, om det er valgt.
`hover`	`boolean`	`false`	Følg markøren hen over elementer, og vend tilbage til `value`, når den forlader (web).
`itemAs`	`element`	`'button'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` sætter dets inline-style.
`highlightClassName`	`string`		Klasse til markeringen; `highlightStyle` sætter dens inline-style.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Komponentside og arbejdsbænk

MotionPager

Swipebare sider fra data.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrævet	Dit data-array.
`index`	`number`		Den viste side. Udelad den for at lade pageren holde styr på sin egen.
`defaultIndex`	`number`	`0`	Startside, når `index` ikke er kontrolleret.
`onIndexChange`	`(index, item) => void`		Kører med indeks og element, så snart et swipe, en tast eller en hjulgestus lander.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøgle for et element. Standard er `item.id`, eller selve elementet for strenge og tal.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Tegner en side; får dens indeks, og om den er aktiv.
`gap`	`number`	`0`	Afstand mellem sider i pixels.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` sætter dets inline-style.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Komponentside og arbejdsbænk

Lister

MotionList

En liste med nøgler fra data, der kun animerer det, der ændrede sig.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrævet	Dit data-array.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøgle for et element. Standard er `item.id`, eller selve elementet for strenge og tal.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Tegner et element.
`as`	`element`	`'div'`	Elementet, der renderes.
`itemAs`	`element`	`'li' \| 'div'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` sætter dets inline-style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hvordan elementer kommer ind og forlader.
`distance`	`number`	`16`	Afstand for `rise` og `slide` i pixels.
`stagger`	`number`	`40`	Millisekunder mellem indkommende elementer.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskadens retning.
`present`	`boolean`	`true`	`false` animerer alle elementer ud og bevarer layoutet; `true` bringer dem tilbage.
`initial`	`boolean`	`true`	Afspil indgangen, når listen monteres.
`playKey`	`string \| number`		At ændre den afspiller indgangen igen.
`transition`	`Transition`	`spring`	Overgang til elementer, der kommer ind og forlader.
`layoutTransition`	`Transition`	`spring`	Overgang til elementer, der glider til nye positioner.

Komponentside og arbejdsbænk

MotionReorder

Træk for at omsortere en liste eller et gitter, med tastaturflytninger.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`		Elementerne, når du styrer rækkefølgen.
`defaultItems`	`readonly T[]`	`[]`	Startelementer, når komponenten holder rækkefølgen.
`onItemsChange`	`(items, { reason, key }) => void`		Kører med den nye rækkefølge, og om den kom fra et træk, et slip eller tastaturet.
`getKey`	`(item) => string \| number`	`item`	Returnerer en unik nøgle for et element. Standard er selve elementet.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Tegner et element; får dets indeks, og om det trækkes.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` flytter andre elementer under trækket; `drop` venter på slippet.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` eller `grid`.
`columns`	`number`	`3`	Kolonner i et gitter.
`gap`	`number`	`12`	Afstand mellem elementer i pixels.
`disabled`	`boolean`	`false`	Slår træk fra.
`duration`	`number`	`260`	Millisekunder for elementer, der rykker til side.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` sætter dets inline-style.

Komponentside og arbejdsbænk

Gestus

MotionSwipe

En række, der viser handlinger ved et vandret swipe og kan swipes væk.

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Rækkens indhold.
`startActions`	`ReactNode`		Vises i linjens begyndelse, når rækken trækkes mod slutningen.
`endActions`	`ReactNode`		Vises i linjens slutning, når rækken trækkes mod begyndelsen.
`dismiss`	`'start' \| 'end' \| 'both'`		Sider, hvor et langt swipe eller et kast fjerner rækken.
`onDismiss`	`(side) => void`		Kører, efter at rækken er gledet ud og foldet sammen; fjern elementet fra dine data her.
`onOpenChange`	`(side \| null) => void`		Kører med den åbne side eller `null`, når rækken lukker.
`disabled`	`boolean`	`false`	Slår swipe fra.
`contentClassName`	`string`		Klasse til rækkens indhold; `contentStyle` sætter dets inline-style.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Komponentside og arbejdsbænk

MotionHold

Tryk og hold for at bekræfte; slipper du tidligt, spoles tilbage.

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Knappens etiket.
`onConfirm`	`() => void`		Kører, når holdet er fuldført.
`duration`	`number`	`1200`	Millisekunder, trykket skal holdes.
`disabled`	`boolean`	`false`	Slår knappen fra.
`fillClassName`	`string`		Klasse til det voksende fyld; `fillStyle` sætter dets inline-style.

Komponentside og arbejdsbænk

Overlays

MotionSheet

En bottom sheet, top sheet eller sideskuffe med stoppunkter.

Prop	Type	Standard	Beskrivelse
`open`	`boolean`	`false`	Om sheeten vises.
`onOpenChange`	`(open) => void`		Kører med `false`, når sheeten trækkes, trykkes eller Escape-lukkes.
`detents`	`(number \| 'content')[]`	`['content']`	Hvilestørrelser: en brøkdel af skærmen, pixels eller `'content'`.
`detent`	`number`		Kontrolleret indeks for stoppunkt.
`defaultDetent`	`number`	`0`	Indeks for stoppunkt ved åbning uden `detent`.
`onDetentChange`	`(index) => void`		Kører med indekset for det stoppunkt, sheeten lander på.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Kanten, sheeten kommer fra.
`modal`	`boolean`	`true`	Tilføjer en baggrund, holder fokus indeni og gør siden inert.
`dismissible`	`boolean`	`true`	Træk forbi det mindste stoppunkt, baggrunden og Escape lukker den.
`backdropClassName`	`string`		Klasse til baggrunden; `backdropStyle` sætter dens inline-style.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Komponentside og arbejdsbænk

MotionZoom

Et billede, der zoomer fra, hvor det er, til det fylder skærmen.

Prop	Type	Standard	Beskrivelse
`src`	`string`		Billedet, der vises på stedet.
`zoomSrc`	`string`		Et større billede, der vises, når det er indlæst; behold samme billedformat.
`margin`	`number`	`24`	Afstand omkring det zoomede billede i pixels.
`disabled`	`boolean`	`false`	Slår zoom fra.
`onZoomChange`	`(zoomed) => void`		Kører med `true` ved zoom ind og `false` ved lukning.
`backdropStyle`	`CSSProperties`		Inline-style til baggrunden.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Komponentside og arbejdsbænk

Fremskridt

ProgressBar

En kontrolleret fremskridtslinje med en ubestemt tilstand.

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremskridt fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Værdien, der betyder færdig.
`color`	`string`	`'currentColor'`	Fyldfarve.
`trackColor`	`string`	`'#e7ece9'`	Sporets farve.
`thickness`	`number`	`8`	Linjetykkelse i pixels.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Fyld fra venstre (`ltr`) eller fra højre (`rtl`).
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Komponentside og arbejdsbænk

ProgressRing

En kontrolleret fremskridtsring med en ubestemt tilstand.

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremskridt fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Værdien, der betyder færdig.
`size`	`number`	`96`	Diameter i pixels.
`thickness`	`number`	`8`	Ringens tykkelse i pixels.
`color`	`string`	`'currentColor'`	Buens farve.
`trackColor`	`string`	`'#e7ece9'`	Sporets farve.
`children`	`ReactNode`		En etiket i midten.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.

Komponentside og arbejdsbænk

Overgange

motionTokens

Færdige værdier til enhver transition-prop.

Prop	Type	Standard	Beskrivelse
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Varigheder i millisekunder.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Timingovergange med en varighed og en navngiven kurve.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Fjederovergange, fra hurtige og faste til bløde og hoppende.

Overgange

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