Referencia de la API

Todos los exports de @kkwaenggwari/animated-chorus con sus props, tipos y valores por defecto. Los mismos nombres funcionan en la web y en React Native.

Filtrar17 APIs

Números y texto

MotionNumber

Un número cuyas cifras ruedan como ruedas.

Prop	Tipo	Por defecto	Descripción
`value`	`number \| bigint \| string`	`—`obligatoria	El número, o texto numérico ya formateado por quien llama.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` mueve un paso cada cifra que cambia; `roll` pasa por los dígitos intermedios.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` sigue el cambio de magnitud para que los acarreos rueden en un sentido; `digit` compara cada cifra por separado.
`stagger`	`number`	`45`	Milisegundos entre cifras que cambian, desde las unidades hacia fuera. La onda completa está acotada.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Una función que devuelve el texto que se muestra, u opciones de `Intl.NumberFormat` (con `intl`).
`intl`	`boolean`	`false`	Usa el `Intl.NumberFormat` integrado. Desactivado por defecto para que ningún entorno necesite `Intl`.
`locale`	`string \| string[]`		Configuración regional para `intl`.
`prefix`	`string`		Texto antes del número.
`suffix`	`string`		Texto después del número.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onMotionComplete`	`(value) => void`		Se ejecuta con el valor cuando las cifras se han asentado.

Página del componente y banco de pruebas

MotionText

Texto que se anima al cambiar: el texto numérico rueda por cifras y el resto se intercambia.

Prop	Tipo	Por defecto	Descripción
`children`	`ReactNode`		El texto que se muestra.
`as`	`element`	`'span'`	El elemento que se renderiza.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onMotionComplete`	`(text) => void`		Se ejecuta cuando el movimiento se asienta.

Página del componente y banco de pruebas

MotionStream

Texto en streaming mostrado a un ritmo constante que se pone al día con las ráfagas.

Prop	Tipo	Por defecto	Descripción
`text`	`string`	`—`obligatoria	El texto hasta ahora. El texto que crece aparece a un ritmo constante; una reescritura continúa desde el inicio común.
`speed`	`number`	`90`	Ritmo base de revelado, en caracteres por segundo.
`catchUp`	`number`	`900`	Lo acumulado se revela en unos tantos milisegundos acelerando el ritmo.
`initial`	`boolean`	`false`	Revela también el texto presente al montar (si no, se muestra de inmediato).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` hace aparecer los caracteres nuevos con un fundido; `none` los muestra directamente.
`children`	`(visible: string) => ReactNode`		Una función que recibe el texto dosificado, por ejemplo para renderizar Markdown.
`as`	`element`	`'span'`	El elemento que se renderiza.
`onMotionComplete`	`(text) => void`		Se ejecuta cada vez que el revelado alcanza a `text`.

Página del componente y banco de pruebas

Contenido y tamaño

MotionSwap

Contenido que hace un fundido cruzado mientras el elemento se redimensiona.

Prop	Tipo	Por defecto	Descripción
`value`	`unknown`		Identidad del contenido; un valor nuevo provoca el cambio. Los hijos de texto plano son su propia identidad.
`children`	`ReactNode`		El contenido.
`as`	`element`	`'span'`	El elemento que se renderiza.
`inline`	`boolean`	`as === 'span'`	`true` ajusta el tamaño al contenido (etiquetas, iconos); `false` ocupa el ancho del padre y anima la altura.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Dónde se sitúa el contenido mientras cambia el tamaño.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Cómo entra y sale el contenido: `up` sube, `down` baja y `scale` crece.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onMotionComplete`	`(value) => void`		Se ejecuta cuando el movimiento se asienta.

Página del componente y banco de pruebas

MotionHeight

Anima la altura hasta su contenido: plegar, desplegar y cambios de contenido.

Prop	Tipo	Por defecto	Descripción
`open`	`boolean`	`true`	`false` pliega hasta altura cero; el contenido sigue montado pero oculto e inerte.
`children`	`ReactNode`		El contenido.
`as`	`element`	`'div'`	El elemento que se renderiza.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onMotionComplete`	`(open) => void`		Se ejecuta con `open` cuando la altura se ha asentado.

Página del componente y banco de pruebas

MotionPresence

Mantiene el contenido montado mientras entra y sale animado.

Prop	Tipo	Por defecto	Descripción
`present`	`boolean`	`—`obligatoria	Muestra u oculta el contenido. Cambia esto en lugar de desmontar.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	La pose en reposo.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	La pose con la que el contenido sale y desde la que entra.
`as`	`element`	`'div'`	El elemento que se renderiza.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onExitComplete`	`() => void`		Se ejecuta después de que el contenido haya salido y se haya eliminado.

Página del componente y banco de pruebas

Selección y paginación

MotionHighlight

Elementos a partir de datos con un resaltado que viaja hasta el elemento seleccionado.

Prop	Tipo	Por defecto	Descripción
`items`	`readonly T[]`	`—`obligatoria	Tu array de datos.
`value`	`key \| null`	`—`obligatoria	Key del elemento resaltado; `null` oculta el resaltado.
`onValueChange`	`(key, item) => void`		Se ejecuta con la key y el elemento cuando se pulsa un elemento.
`getKey`	`(item) => string \| number`	`item.id`	Devuelve una key única y estable para un elemento. Por defecto `item.id`, o el propio elemento si es una cadena o un número.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Dibuja un elemento; recibe si está seleccionado.
`hover`	`boolean`	`false`	Sigue al puntero sobre los elementos y vuelve a `value` al salir (web).
`itemAs`	`element`	`'button'`	El elemento de cada ítem.
`itemClassName`	`string`		Clase para el elemento de cada ítem; `itemStyle` fija su estilo en línea.
`highlightClassName`	`string`		Clase para el resaltado; `highlightStyle` fija su estilo en línea.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Página del componente y banco de pruebas

MotionPager

Páginas deslizables a partir de datos.

Prop	Tipo	Por defecto	Descripción
`items`	`readonly T[]`	`—`obligatoria	Tu array de datos.
`index`	`number`		La página que se muestra. Omítela para que el paginador la gestione.
`defaultIndex`	`number`	`0`	Página inicial cuando `index` no está controlado.
`onIndexChange`	`(index, item) => void`		Se ejecuta con el índice y el elemento en cuanto un deslizamiento, una tecla o la rueda se asientan.
`getKey`	`(item) => string \| number`	`item.id`	Devuelve una key única y estable para un elemento. Por defecto `item.id`, o el propio elemento si es una cadena o un número.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Dibuja una página; recibe su índice y si está activa.
`gap`	`number`	`0`	Espacio entre páginas en píxeles.
`itemClassName`	`string`		Clase para el elemento de cada ítem; `itemStyle` fija su estilo en línea.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Página del componente y banco de pruebas

Listas

MotionList

Una lista con keys a partir de datos que anima solo lo que cambió.

Prop	Tipo	Por defecto	Descripción
`items`	`readonly T[]`	`—`obligatoria	Tu array de datos.
`getKey`	`(item) => string \| number`	`item.id`	Devuelve una key única y estable para un elemento. Por defecto `item.id`, o el propio elemento si es una cadena o un número.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Dibuja un elemento.
`as`	`element`	`'div'`	El elemento que se renderiza.
`itemAs`	`element`	`'li' \| 'div'`	El elemento de cada ítem.
`itemClassName`	`string`		Clase para el elemento de cada ítem; `itemStyle` fija su estilo en línea.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Cómo entran y salen los elementos.
`distance`	`number`	`16`	Recorrido de `rise` y `slide` en píxeles.
`stagger`	`number`	`40`	Milisegundos entre los elementos que entran.
`order`	`'forward' \| 'reverse'`	`'forward'`	Sentido del escalonado.
`present`	`boolean`	`true`	`false` anima la salida de todos los elementos manteniendo el layout; `true` los trae de vuelta.
`initial`	`boolean`	`true`	Reproduce la entrada cuando la lista se monta.
`playKey`	`string \| number`		Cambiarlo repite la entrada.
`transition`	`Transition`	`spring`	Transición de los elementos que entran y salen.
`layoutTransition`	`Transition`	`spring`	Transición de los elementos que se deslizan a su nueva posición.

Página del componente y banco de pruebas

MotionReorder

Arrastra para reordenar una lista o una cuadrícula, con movimientos por teclado.

Prop	Tipo	Por defecto	Descripción
`items`	`readonly T[]`		Los elementos, cuando tú controlas el orden.
`defaultItems`	`readonly T[]`	`[]`	Elementos iniciales, cuando el componente guarda el orden.
`onItemsChange`	`(items, { reason, key }) => void`		Se ejecuta con el nuevo orden y con si vino de un arrastre, de soltar o del teclado.
`getKey`	`(item) => string \| number`	`item`	Devuelve una key única para un elemento. Por defecto, el propio elemento.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Dibuja un elemento; recibe su índice y si se está arrastrando.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` mueve los demás elementos mientras arrastras; `drop` espera a que sueltes.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` o `grid`.
`columns`	`number`	`3`	Columnas de una cuadrícula.
`gap`	`number`	`12`	Espacio entre elementos en píxeles.
`disabled`	`boolean`	`false`	Desactiva el arrastre.
`duration`	`number`	`260`	Milisegundos para los elementos que se apartan.
`itemClassName`	`string`		Clase para el elemento de cada ítem; `itemStyle` fija su estilo en línea.

Página del componente y banco de pruebas

Gestos

MotionSwipe

Una fila que revela acciones con un deslizamiento horizontal y que se puede apartar deslizando.

Prop	Tipo	Por defecto	Descripción
`children`	`ReactNode`		El contenido de la fila.
`startActions`	`ReactNode`		Aparecen al principio de la línea cuando la fila se arrastra hacia el final.
`endActions`	`ReactNode`		Aparecen al final de la línea cuando la fila se arrastra hacia el principio.
`dismiss`	`'start' \| 'end' \| 'both'`		Lados en los que un deslizamiento largo o un lanzamiento elimina la fila.
`onDismiss`	`(side) => void`		Se ejecuta después de que la fila haya salido y se haya plegado; quita aquí el elemento de tus datos.
`onOpenChange`	`(side \| null) => void`		Se ejecuta con el lado abierto, o con `null` cuando la fila se cierra.
`disabled`	`boolean`	`false`	Desactiva el deslizamiento.
`contentClassName`	`string`		Clase para el contenido de la fila; `contentStyle` fija su estilo en línea.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Página del componente y banco de pruebas

MotionHold

Mantén pulsado para confirmar; si sueltas antes, retrocede.

Prop	Tipo	Por defecto	Descripción
`children`	`ReactNode`		La etiqueta del botón.
`onConfirm`	`() => void`		Se ejecuta una vez cuando se completa la pulsación.
`duration`	`number`	`1200`	Milisegundos que hay que mantener pulsado.
`disabled`	`boolean`	`false`	Desactiva el botón.
`fillClassName`	`string`		Clase para el relleno que crece; `fillStyle` fija su estilo en línea.

Página del componente y banco de pruebas

Superposiciones

MotionSheet

Una hoja inferior, una hoja superior o un cajón lateral con posiciones de anclaje.

Prop	Tipo	Por defecto	Descripción
`open`	`boolean`	`false`	Si la hoja se muestra.
`onOpenChange`	`(open) => void`		Se ejecuta con `false` cuando la hoja se cierra arrastrando, tocando o con Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Tamaños de reposo: una fracción de la pantalla, píxeles o `'content'`.
`detent`	`number`		Índice de posición controlado.
`defaultDetent`	`number`	`0`	Índice de posición que se usa al abrir sin `detent`.
`onDetentChange`	`(index) => void`		Se ejecuta con el índice de la posición en la que se asienta la hoja.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	El borde desde el que aparece la hoja.
`modal`	`boolean`	`true`	Añade un fondo, mantiene el foco dentro y deja la página inerte.
`dismissible`	`boolean`	`true`	Arrastrar más allá de la posición más pequeña, el fondo y Escape la cierran.
`backdropClassName`	`string`		Clase para el fondo; `backdropStyle` fija su estilo en línea.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Página del componente y banco de pruebas

MotionZoom

Una imagen que se amplía desde donde está hasta llenar la pantalla.

Prop	Tipo	Por defecto	Descripción
`src`	`string`		La imagen que se muestra en su sitio.
`zoomSrc`	`string`		Una imagen más grande que se muestra cuando ha cargado; mantén la misma proporción.
`margin`	`number`	`24`	Espacio que se deja alrededor de la imagen ampliada, en píxeles.
`disabled`	`boolean`	`false`	Desactiva el zoom.
`onZoomChange`	`(zoomed) => void`		Se ejecuta con `true` al ampliar y con `false` al cerrar.
`backdropStyle`	`CSSProperties`		Estilo en línea del fondo.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Página del componente y banco de pruebas

Progreso

ProgressBar

Una línea de progreso controlada con estado indeterminado.

Prop	Tipo	Por defecto	Descripción
`value`	`number \| null`		Progreso de `0` a `max`; `null` es indeterminado.
`max`	`number`	`100`	El valor que significa completo.
`color`	`string`	`'currentColor'`	Color del relleno.
`trackColor`	`string`	`'#e7ece9'`	Color de la pista.
`thickness`	`number`	`8`	Grosor de la línea en píxeles.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Rellenar desde la izquierda (`ltr`) o desde la derecha (`rtl`).
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Página del componente y banco de pruebas

ProgressRing

Un anillo de progreso controlado con estado indeterminado.

Prop	Tipo	Por defecto	Descripción
`value`	`number \| null`		Progreso de `0` a `max`; `null` es indeterminado.
`max`	`number`	`100`	El valor que significa completo.
`size`	`number`	`96`	Diámetro en píxeles.
`thickness`	`number`	`8`	Grosor del anillo en píxeles.
`color`	`string`	`'currentColor'`	Color del arco.
`trackColor`	`string`	`'#e7ece9'`	Color de la pista.
`children`	`ReactNode`		Una etiqueta que se muestra en el centro.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.

Página del componente y banco de pruebas

Transiciones

motionTokens

Valores listos para cualquier prop transition.

Prop	Tipo	Por defecto	Descripción
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Duraciones en milisegundos.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Transiciones de tiempo con una duración y una curva con nombre.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Transiciones de resorte, de rápidas y firmes a suaves y con rebote.

Transiciones

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