API-referanse

Hver eksport i @kkwaenggwari/animated-chorus med props, typer og standardverdier. De samme navnene fungerer på nettet og i React Native.

Filter17 API-er

Tall og tekst

MotionNumber

Et tall der plassene ruller som hjul.

Prop	Type	Standard	Beskrivelse
`value`	`number \| bigint \| string`	`—`påkrevd	Tallet, eller numerisk tekst du har formatert.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` flytter hver endrede plass ett steg; `roll` går gjennom sifrene imellom.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` følger størrelsesendringen så mente ruller én vei; `digit` sammenligner hver plass for seg.
`stagger`	`number`	`45`	Millisekunder mellom endrede plasser, fra enerne og utover. Hele bølgen er begrenset.
`format`	`(value) => string \| Intl.NumberFormatOptions`		En funksjon som returnerer teksten som skal vises, eller `Intl.NumberFormat`-alternativer (med `intl`).
`intl`	`boolean`	`false`	Bruk den innebygde `Intl.NumberFormat`. Av som standard, så ingen kjøremiljøer trenger `Intl`.
`locale`	`string \| string[]`		Locale for `intl`.
`prefix`	`string`		Tekst før tallet.
`suffix`	`string`		Tekst etter tallet.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(value) => void`		Kjører med verdien når plassene har landet.

Komponentside og arbeidsbenk

MotionText

Tekst som animeres når den endres: numerisk tekst ruller per plass, annen tekst byttes.

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Teksten som skal vises.
`as`	`element`	`'span'`	Elementet som renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(text) => void`		Kjører når bevegelsen lander.

Komponentside og arbeidsbenk

MotionStream

Strømmet tekst som vises i jevnt tempo og tar igjen støt.

Prop	Type	Standard	Beskrivelse
`text`	`string`	`—`påkrevd	Teksten så langt. Voksende tekst vises i jevnt tempo; en omskriving fortsetter fra den felles begynnelsen.
`speed`	`number`	`90`	Grunntempo for visning i tegn per sekund.
`catchUp`	`number`	`900`	Et etterslep vises innen omtrent så mange millisekunder ved å øke tempoet.
`initial`	`boolean`	`false`	Vis også teksten som finnes ved mount (ellers vises den med en gang).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` toner nye tegn inn; `none` viser dem direkte.
`children`	`(visible: string) => ReactNode`		En funksjon som får den taktede teksten, for eksempel for å rendere Markdown.
`as`	`element`	`'span'`	Elementet som renderes.
`onMotionComplete`	`(text) => void`		Kjører hver gang visningen har tatt igjen `text`.

Komponentside og arbeidsbenk

Innhold og størrelse

MotionSwap

Innhold som krysstones mens elementet endrer størrelse.

Prop	Type	Standard	Beskrivelse
`value`	`unknown`		Innholdets identitet; en ny verdi bytter. Barn som bare er tekst, er sin egen identitet.
`children`	`ReactNode`		Innholdet.
`as`	`element`	`'span'`	Elementet som renderes.
`inline`	`boolean`	`as === 'span'`	`true` tilpasser størrelsen til innholdet (etiketter, ikoner); `false` fyller forelderens bredde og animerer høyden.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Hvor innholdet sitter mens størrelsen endres.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hvordan innhold kommer inn og forlater: `up` stiger, `down` faller, `scale` vokser.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(value) => void`		Kjører når bevegelsen lander.

Komponentside og arbeidsbenk

MotionHeight

Animerer høyden etter innholdet: lukke, åpne og innholdsendringer.

Prop	Type	Standard	Beskrivelse
`open`	`boolean`	`true`	`false` lukker til null høyde; innholdet forblir montert, men skjult og inert.
`children`	`ReactNode`		Innholdet.
`as`	`element`	`'div'`	Elementet som renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(open) => void`		Kjører med `open` når høyden har landet.

Komponentside og arbeidsbenk

MotionPresence

Holder innhold montert mens det animeres inn og ut.

Prop	Type	Standard	Beskrivelse
`present`	`boolean`	`—`påkrevd	Vis eller skjul innholdet. Endre dette i stedet for å avmontere.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Posen i ro.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Posen innholdet forlater med og kommer inn fra.
`as`	`element`	`'div'`	Elementet som renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onExitComplete`	`() => void`		Kjører etter at innholdet har forlatt og er fjernet.

Komponentside og arbeidsbenk

Utvalg og sider

MotionHighlight

Elementer fra data med én markering som flytter til det valgte elementet.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrevd	Data-arrayen din.
`value`	`key \| null`	`—`påkrevd	Nøkkelen for det markerte elementet; `null` skjuler markeringen.
`onValueChange`	`(key, item) => void`		Kjører med nøkkelen og elementet når et element trykkes.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøkkel for et element. Standard er `item.id`, eller selve elementet for strenger og tall.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Tegner et element; får vite om det er valgt.
`hover`	`boolean`	`false`	Følg pekeren over elementer og gå tilbake til `value` når den forlater (web).
`itemAs`	`element`	`'button'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` setter inline-stilen.
`highlightClassName`	`string`		Klasse for markeringen; `highlightStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Komponentside og arbeidsbenk

MotionPager

Sveipbare sider fra data.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrevd	Data-arrayen din.
`index`	`number`		Siden som vises. Utelat den for å la pageren holde styr på sin egen.
`defaultIndex`	`number`	`0`	Startside når `index` ikke er kontrollert.
`onIndexChange`	`(index, item) => void`		Kjører med indeks og element så snart et sveip, en tast eller en hjulbevegelse lander.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøkkel for et element. Standard er `item.id`, eller selve elementet for strenger og tall.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Tegner en side; får indeksen og om den er aktiv.
`gap`	`number`	`0`	Avstand mellom sider i piksler.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Komponentside og arbeidsbenk

Lister

MotionList

En liste med nøkler fra data som bare animerer det som endret seg.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrevd	Data-arrayen din.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøkkel for et element. Standard er `item.id`, eller selve elementet for strenger og tall.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Tegner et element.
`as`	`element`	`'div'`	Elementet som renderes.
`itemAs`	`element`	`'li' \| 'div'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` setter inline-stilen.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hvordan elementer kommer inn og forlater.
`distance`	`number`	`16`	Avstand for `rise` og `slide` i piksler.
`stagger`	`number`	`40`	Millisekunder mellom innkommende elementer.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskadens retning.
`present`	`boolean`	`true`	`false` animerer alle elementer ut og beholder layouten; `true` henter dem tilbake.
`initial`	`boolean`	`true`	Spill av inngangen når listen monteres.
`playKey`	`string \| number`		Å endre den spiller av inngangen på nytt.
`transition`	`Transition`	`spring`	Overgang for elementer som kommer inn og forlater.
`layoutTransition`	`Transition`	`spring`	Overgang for elementer som glir til nye posisjoner.

Komponentside og arbeidsbenk

MotionReorder

Dra for å sortere om en liste eller et rutenett, med tastaturflytting.

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`		Elementene, når du styrer rekkefølgen.
`defaultItems`	`readonly T[]`	`[]`	Startelementer, når komponenten holder rekkefølgen.
`onItemsChange`	`(items, { reason, key }) => void`		Kjører med den nye rekkefølgen og om den kom fra et drag, et slipp eller tastaturet.
`getKey`	`(item) => string \| number`	`item`	Returnerer en unik nøkkel for et element. Standard er selve elementet.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Tegner et element; får indeksen og om det dras.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` flytter andre elementer under draget; `drop` venter på slippet.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` eller `grid`.
`columns`	`number`	`3`	Kolonner i et rutenett.
`gap`	`number`	`12`	Avstand mellom elementer i piksler.
`disabled`	`boolean`	`false`	Slår av dra.
`duration`	`number`	`260`	Millisekunder for elementer som flytter seg unna.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` setter inline-stilen.

Komponentside og arbeidsbenk

Bevegelser

MotionSwipe

En rad som viser handlinger ved et vannrett sveip og kan sveipes bort.

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Radens innhold.
`startActions`	`ReactNode`		Vises i begynnelsen av linjen når raden dras mot slutten.
`endActions`	`ReactNode`		Vises i slutten av linjen når raden dras mot begynnelsen.
`dismiss`	`'start' \| 'end' \| 'both'`		Sider der et langt sveip eller et kast fjerner raden.
`onDismiss`	`(side) => void`		Kjører etter at raden har glidd ut og lukket seg; fjern elementet fra dataene dine her.
`onOpenChange`	`(side \| null) => void`		Kjører med den åpne siden, eller `null` når raden lukkes.
`disabled`	`boolean`	`false`	Slår av sveiping.
`contentClassName`	`string`		Klasse for radinnholdet; `contentStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Komponentside og arbeidsbenk

MotionHold

Trykk og hold for å bekrefte; slipper du tidlig, spoles det tilbake.

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Knappens etikett.
`onConfirm`	`() => void`		Kjører når holdet er fullført.
`duration`	`number`	`1200`	Millisekunder trykket må holdes.
`disabled`	`boolean`	`false`	Slår av knappen.
`fillClassName`	`string`		Klasse for det voksende fyllet; `fillStyle` setter inline-stilen.

Komponentside og arbeidsbenk

Overlegg

MotionSheet

En bottom sheet, top sheet eller sideskuff med stoppunkter.

Prop	Type	Standard	Beskrivelse
`open`	`boolean`	`false`	Om sheeten vises.
`onOpenChange`	`(open) => void`		Kjører med `false` når sheeten dras, trykkes eller lukkes med Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Hvilestørrelser: en brøkdel av skjermen, piksler eller `'content'`.
`detent`	`number`		Kontrollert indeks for stoppunkt.
`defaultDetent`	`number`	`0`	Indeks for stoppunkt ved åpning uten `detent`.
`onDetentChange`	`(index) => void`		Kjører med indeksen for stoppunktet sheeten lander på.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Kanten sheeten kommer fra.
`modal`	`boolean`	`true`	Legger til en bakgrunn, holder fokus inni og gjør siden inert.
`dismissible`	`boolean`	`true`	Dra forbi det minste stoppunktet, bakgrunnen og Escape lukker den.
`backdropClassName`	`string`		Klasse for bakgrunnen; `backdropStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Komponentside og arbeidsbenk

MotionZoom

Et bilde som zoomer fra der det er til det fyller skjermen.

Prop	Type	Standard	Beskrivelse
`src`	`string`		Bildet som vises på plass.
`zoomSrc`	`string`		Et større bilde som vises når det er lastet inn; behold samme sideforhold.
`margin`	`number`	`24`	Avstand rundt det zoomede bildet i piksler.
`disabled`	`boolean`	`false`	Slår av zoom.
`onZoomChange`	`(zoomed) => void`		Kjører med `true` ved zoom inn og `false` ved lukking.
`backdropStyle`	`CSSProperties`		Inline-stil for bakgrunnen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Komponentside og arbeidsbenk

Fremdrift

ProgressBar

En kontrollert fremdriftslinje med en ubestemt tilstand.

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremdrift fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Verdien som betyr fullført.
`color`	`string`	`'currentColor'`	Fyllfarge.
`trackColor`	`string`	`'#e7ece9'`	Sporfarge.
`thickness`	`number`	`8`	Linjetykkelse i piksler.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Fyll fra venstre (`ltr`) eller fra høyre (`rtl`).
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Komponentside og arbeidsbenk

ProgressRing

En kontrollert fremdriftsring med en ubestemt tilstand.

Prop	Type	Standard	Beskrivelse
`value`	`number \| null`		Fremdrift fra `0` til `max`; `null` er ubestemt.
`max`	`number`	`100`	Verdien som betyr fullført.
`size`	`number`	`96`	Diameter i piksler.
`thickness`	`number`	`8`	Ringtykkelse i piksler.
`color`	`string`	`'currentColor'`	Buens farge.
`trackColor`	`string`	`'#e7ece9'`	Sporfarge.
`children`	`ReactNode`		En etikett i midten.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Komponentside og arbeidsbenk

Overganger

motionTokens

Ferdige verdier for enhver transition-prop.

Prop	Type	Standard	Beskrivelse
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Varigheter i millisekunder.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Timingoverganger med en varighet og en navngitt kurve.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Fjæroverganger, fra raske og faste til myke og sprettende.

Overganger

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