componente · @solu30/ui-kit/display
AnimatedCounter
Número que cuenta desde cero hasta su valor al aparecer; para cifras que cambian en vivo está SlidingNumber.
11 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- carlosmartinpavon
- cmp-packages
- gestorsalon
- raquetea
El componente, montado
Cargando el espécimen…
export function CounterSpecimen() {
return (
<Stage label="AnimatedCounter" tall>
<div className="flex flex-col items-center gap-1">
<span className="font-mono text-3xl font-semibold tabular-nums text-content">
<AnimatedCounter target={1482} duration={1.6} />
</span>
<span className="text-xs text-content/50">reservas procesadas</span>
</div>
</Stage>
)
}De specimens/animation.tsx · CounterSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
Cómo se usa
import { AnimatedCounter } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| target | sí | number | — |
| suffix | opcional | string | — |
| prefix | opcional | string | — |
| duration | opcional | number | — |
| className | opcional | string | — |
Ejemplo del paquete
// Cuenta hasta `target` al entrar en pantalla.
<AnimatedCounter target={1840} prefix="+" suffix=" invitados" duration={1200} />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.