API-referens

Varje export i @kkwaenggwari/animated-chorus med props, typer och standardvärden. Samma namn fungerar på webben och i React Native.

Filter17 API:er

Siffror och text

MotionNumber

Ett tal vars positioner rullar som hjul.

Prop	Typ	Standard	Beskrivning
`value`	`number \| bigint \| string`	`—`krävs	Talet, eller numerisk text som du formaterat.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` flyttar varje ändrad position ett steg; `roll` passerar siffrorna däremellan.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` följer storleksändringen så att minnessiffror rullar åt ett håll; `digit` jämför varje position för sig.
`stagger`	`number`	`45`	Millisekunder mellan ändrade positioner, från entalen och utåt. Hela vågen är begränsad.
`format`	`(value) => string \| Intl.NumberFormatOptions`		En funktion som returnerar texten som ska visas, eller `Intl.NumberFormat`-alternativ (med `intl`).
`intl`	`boolean`	`false`	Använd det inbyggda `Intl.NumberFormat`. Avstängt som standard så att ingen körmiljö behöver `Intl`.
`locale`	`string \| string[]`		Locale för `intl`.
`prefix`	`string`		Text före talet.
`suffix`	`string`		Text efter talet.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(value) => void`		Körs med värdet när positionerna har landat.

Komponentsida och arbetsbänk

MotionText

Text som animeras när den ändras: numerisk text rullar per position, annan text byts.

Prop	Typ	Standard	Beskrivning
`children`	`ReactNode`		Texten som ska visas.
`as`	`element`	`'span'`	Elementet som renderas.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(text) => void`		Körs när rörelsen landar.

Komponentsida och arbetsbänk

MotionStream

Strömmad text som visas i jämn takt och hinner ikapp skurar.

Prop	Typ	Standard	Beskrivning
`text`	`string`	`—`krävs	Texten hittills. Växande text visas i jämn takt; en omskrivning fortsätter från den gemensamma början.
`speed`	`number`	`90`	Grundtakt för visning i tecken per sekund.
`catchUp`	`number`	`900`	En eftersläpning visas inom ungefär så här många millisekunder genom att takten ökar.
`initial`	`boolean`	`false`	Visa även texten som finns vid mount (annars syns den direkt).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` tonar in nya tecken; `none` visar dem direkt.
`children`	`(visible: string) => ReactNode`		En funktion som får den taktade texten, till exempel för att rendera Markdown.
`as`	`element`	`'span'`	Elementet som renderas.
`onMotionComplete`	`(text) => void`		Körs varje gång visningen har hunnit ikapp `text`.

Komponentsida och arbetsbänk

Innehåll och storlek

MotionSwap

Innehåll som övertonas medan elementet ändrar storlek.

Prop	Typ	Standard	Beskrivning
`value`	`unknown`		Innehållets identitet; ett nytt värde byter. Barn som bara är text är sin egen identitet.
`children`	`ReactNode`		Innehållet.
`as`	`element`	`'span'`	Elementet som renderas.
`inline`	`boolean`	`as === 'span'`	`true` anpassar storleken efter innehållet (etiketter, ikoner); `false` fyller förälderns bredd och animerar höjden.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Var innehållet sitter medan storleken ändras.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hur innehåll kommer in och lämnar: `up` stiger, `down` faller, `scale` växer.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(value) => void`		Körs när rörelsen landar.

Komponentsida och arbetsbänk

MotionHeight

Animerar höjden efter innehållet: fälla ihop, fälla ut och innehållsändringar.

Prop	Typ	Standard	Beskrivning
`open`	`boolean`	`true`	`false` fäller ihop till höjden noll; innehållet förblir monterat men dolt och inert.
`children`	`ReactNode`		Innehållet.
`as`	`element`	`'div'`	Elementet som renderas.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(open) => void`		Körs med `open` när höjden har landat.

Komponentsida och arbetsbänk

MotionPresence

Håller innehåll monterat medan det animeras in och ut.

Prop	Typ	Standard	Beskrivning
`present`	`boolean`	`—`krävs	Visa eller dölj innehållet. Ändra det här i stället för att avmontera.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Posen i vila.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Posen som innehållet lämnar med och kommer in från.
`as`	`element`	`'div'`	Elementet som renderas.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onExitComplete`	`() => void`		Körs efter att innehållet har lämnat och tagits bort.

Komponentsida och arbetsbänk

Urval och sidor

MotionHighlight

Objekt från data med en markering som flyttar till det valda objektet.

Prop	Typ	Standard	Beskrivning
`items`	`readonly T[]`	`—`krävs	Din dataarray.
`value`	`key \| null`	`—`krävs	Nyckeln för det markerade objektet; `null` döljer markeringen.
`onValueChange`	`(key, item) => void`		Körs med nyckeln och objektet när ett objekt trycks.
`getKey`	`(item) => string \| number`	`item.id`	Returnerar en unik, stabil nyckel för ett objekt. Standard är `item.id`, eller själva objektet för strängar och tal.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Ritar ett objekt; får veta om det är valt.
`hover`	`boolean`	`false`	Följ pekaren över objekt och återgå till `value` när den lämnar (webb).
`itemAs`	`element`	`'button'`	Elementet för varje objekt.
`itemClassName`	`string`		Klass för varje objektelement; `itemStyle` sätter dess inline-style.
`highlightClassName`	`string`		Klass för markeringen; `highlightStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Komponentsida och arbetsbänk

MotionPager

Svepbara sidor från data.

Prop	Typ	Standard	Beskrivning
`items`	`readonly T[]`	`—`krävs	Din dataarray.
`index`	`number`		Sidan som visas. Utelämna den för att låta pagern hålla reda på sin egen.
`defaultIndex`	`number`	`0`	Startsida när `index` inte är kontrollerat.
`onIndexChange`	`(index, item) => void`		Körs med index och objekt så fort ett svep, en tangent eller en hjulgest landar.
`getKey`	`(item) => string \| number`	`item.id`	Returnerar en unik, stabil nyckel för ett objekt. Standard är `item.id`, eller själva objektet för strängar och tal.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Ritar en sida; får dess index och om den är aktiv.
`gap`	`number`	`0`	Avstånd mellan sidor i pixlar.
`itemClassName`	`string`		Klass för varje objektelement; `itemStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Komponentsida och arbetsbänk

Listor

MotionList

En lista med nycklar från data som bara animerar det som ändrats.

Prop	Typ	Standard	Beskrivning
`items`	`readonly T[]`	`—`krävs	Din dataarray.
`getKey`	`(item) => string \| number`	`item.id`	Returnerar en unik, stabil nyckel för ett objekt. Standard är `item.id`, eller själva objektet för strängar och tal.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Ritar ett objekt.
`as`	`element`	`'div'`	Elementet som renderas.
`itemAs`	`element`	`'li' \| 'div'`	Elementet för varje objekt.
`itemClassName`	`string`		Klass för varje objektelement; `itemStyle` sätter dess inline-style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hur objekt kommer in och lämnar.
`distance`	`number`	`16`	Sträcka för `rise` och `slide` i pixlar.
`stagger`	`number`	`40`	Millisekunder mellan inkommande objekt.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskadens riktning.
`present`	`boolean`	`true`	`false` animerar ut alla objekt och behåller layouten; `true` tar tillbaka dem.
`initial`	`boolean`	`true`	Spela upp intåget när listan monteras.
`playKey`	`string \| number`		Att ändra den spelar upp intåget igen.
`transition`	`Transition`	`spring`	Övergång för objekt som kommer in och lämnar.
`layoutTransition`	`Transition`	`spring`	Övergång för objekt som glider till nya platser.

Komponentsida och arbetsbänk

MotionReorder

Dra för att sortera om en lista eller ett rutnät, med tangentbordsförflyttningar.

Prop	Typ	Standard	Beskrivning
`items`	`readonly T[]`		Objekten, när du styr ordningen.
`defaultItems`	`readonly T[]`	`[]`	Startobjekt, när komponenten håller ordningen.
`onItemsChange`	`(items, { reason, key }) => void`		Körs med den nya ordningen och om den kom från en dragning, ett släpp eller tangentbordet.
`getKey`	`(item) => string \| number`	`item`	Returnerar en unik nyckel för ett objekt. Standard är själva objektet.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Ritar ett objekt; får dess index och om det dras.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` flyttar andra objekt under dragningen; `drop` väntar på släppet.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` eller `grid`.
`columns`	`number`	`3`	Kolumner i ett rutnät.
`gap`	`number`	`12`	Avstånd mellan objekt i pixlar.
`disabled`	`boolean`	`false`	Stänger av dragning.
`duration`	`number`	`260`	Millisekunder för objekt som flyttar undan.
`itemClassName`	`string`		Klass för varje objektelement; `itemStyle` sätter dess inline-style.

Komponentsida och arbetsbänk

Gester

MotionSwipe

En rad som visar åtgärder vid ett horisontellt svep och kan svepas bort.

Prop	Typ	Standard	Beskrivning
`children`	`ReactNode`		Radens innehåll.
`startActions`	`ReactNode`		Visas i radens början när raden dras mot slutet.
`endActions`	`ReactNode`		Visas i radens slut när raden dras mot början.
`dismiss`	`'start' \| 'end' \| 'both'`		Sidor där ett långt svep eller ett kast tar bort raden.
`onDismiss`	`(side) => void`		Körs efter att raden glidit ut och fällts ihop; ta bort objektet från din data här.
`onOpenChange`	`(side \| null) => void`		Körs med den öppna sidan, eller `null` när raden stängs.
`disabled`	`boolean`	`false`	Stänger av svepning.
`contentClassName`	`string`		Klass för radinnehållet; `contentStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Komponentsida och arbetsbänk

MotionHold

Håll ned för att bekräfta; att släppa tidigt spolar tillbaka.

Prop	Typ	Standard	Beskrivning
`children`	`ReactNode`		Knappens etikett.
`onConfirm`	`() => void`		Körs när nedhållningen är fullbordad.
`duration`	`number`	`1200`	Millisekunder som trycket måste hållas.
`disabled`	`boolean`	`false`	Stänger av knappen.
`fillClassName`	`string`		Klass för den växande fyllningen; `fillStyle` sätter dess inline-style.

Komponentsida och arbetsbänk

Överlägg

MotionSheet

En bottom sheet, top sheet eller sidolåda med stopplägen.

Prop	Typ	Standard	Beskrivning
`open`	`boolean`	`false`	Om sheeten visas.
`onOpenChange`	`(open) => void`		Körs med `false` när sheeten dras, trycks eller Escape-stängs.
`detents`	`(number \| 'content')[]`	`['content']`	Vilostorlekar: en bråkdel av skärmen, pixlar eller `'content'`.
`detent`	`number`		Kontrollerat index för stoppläge.
`defaultDetent`	`number`	`0`	Index för stoppläge vid öppning utan `detent`.
`onDetentChange`	`(index) => void`		Körs med index för stoppläget som sheeten landar på.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Kanten som sheeten kommer från.
`modal`	`boolean`	`true`	Lägger till en bakgrund, håller fokus inuti och gör sidan inert.
`dismissible`	`boolean`	`true`	Dragning förbi det minsta stoppläget, bakgrunden och Escape stänger den.
`backdropClassName`	`string`		Klass för bakgrunden; `backdropStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Komponentsida och arbetsbänk

MotionZoom

En bild som zoomar från där den är tills den fyller skärmen.

Prop	Typ	Standard	Beskrivning
`src`	`string`		Bilden som visas på plats.
`zoomSrc`	`string`		En större bild som visas när den lästs in; behåll samma bildförhållande.
`margin`	`number`	`24`	Avstånd runt den inzoomade bilden i pixlar.
`disabled`	`boolean`	`false`	Stänger av zoomning.
`onZoomChange`	`(zoomed) => void`		Körs med `true` vid inzoomning och `false` vid stängning.
`backdropStyle`	`CSSProperties`		Inline-style för bakgrunden.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Komponentsida och arbetsbänk

Förlopp

ProgressBar

En kontrollerad förloppslinje med ett obestämt läge.

Prop	Typ	Standard	Beskrivning
`value`	`number \| null`		Förlopp från `0` till `max`; `null` är obestämt.
`max`	`number`	`100`	Värdet som betyder klart.
`color`	`string`	`'currentColor'`	Fyllningsfärg.
`trackColor`	`string`	`'#e7ece9'`	Spårets färg.
`thickness`	`number`	`8`	Linjetjocklek i pixlar.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Fyll från vänster (`ltr`) eller från höger (`rtl`).
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Komponentsida och arbetsbänk

ProgressRing

En kontrollerad förloppsring med ett obestämt läge.

Prop	Typ	Standard	Beskrivning
`value`	`number \| null`		Förlopp från `0` till `max`; `null` är obestämt.
`max`	`number`	`100`	Värdet som betyder klart.
`size`	`number`	`96`	Diameter i pixlar.
`thickness`	`number`	`8`	Ringens tjocklek i pixlar.
`color`	`string`	`'currentColor'`	Bågens färg.
`trackColor`	`string`	`'#e7ece9'`	Spårets färg.
`children`	`ReactNode`		En etikett i mitten.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Komponentsida och arbetsbänk

Övergångar

motionTokens

Färdiga värden för valfri transition-prop.

Prop	Typ	Standard	Beskrivning
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Varaktigheter i millisekunder.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Timingövergångar med en varaktighet och en namngiven kurva.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Fjäderövergångar, från snabba och fasta till mjuka och studsiga.

Övergångar

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