componente · @solu30/ui-kit/animation
TextLoop
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { TextLoop } from '@solu30/ui-kit/animation'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| children | sí | ReactNode[] | Los nodos a rotar, en orden. |
| className | opcional | string | — |
| interval | opcional | number | Segundos que cada item queda visible. Default `2`. |
| transition | opcional | Transition | Transición de entrada/salida. Default: `EASE_CONTENT` del kit. |
| variants | opcional | Variants | — |
| onIndexChange | opcional | (index: number) => void | Se dispara con el índice del item que entra. |
| trigger | opcional | boolean | `false` congela la rotación en el item actual. Default `true`. |
| ariaLive | opcional | "off" | "polite" | Anuncio para lectores de pantalla. Default `"off"` — subilo a `"polite"` sólo cuando la rotación comunique estado y no sea decorativa. |
Ejemplo del paquete
<TextLoop className="text-ui-content-secondary" ariaLive="polite">
<span>Leyendo el contrato…</span>
<span>Buscando cláusulas…</span>
<span>Redactando el resumen…</span>
</TextLoop>Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.