Counter
El componente Counter muestra un número que se incrementa o decrementa gradualmente hasta alcanzar un valor final. También puede mostrar un texto adicional opcional.
Ejemplo
Importación
Para importar el componente Counter, se puede hacer desde fenextjs
import { Counter } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| number | number | sí | 0 | El número que se mostrará y que será incrementado o decrementado gradualmente. |
| text | ReactNode | no | undefined | Texto adicional que se puede mostrar junto con el contador. |
| time | number | no | 1000 | Tiempo en milisegundos para alcanzar el número final. |
| decimal | number | no | 2 | Cantidad de decimales a mostrar en el número. |
| parseNumber | (n: number) => ReactNode | no | parseNumberCount | Función personalizada para formatear el número antes de mostrarlo. |
| className | string | no | '' | Clase CSS para personalizar el contenedor del componente. |
| classNameNumber | string | no | '' | Clase CSS para personalizar la apariencia del número. |
| classNameText | string | no | '' | Clase CSS para personalizar la apariencia del texto. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Básico
<Counter number={100} />- Counter con texto adicional
<Counter number={100} text="Progreso" />- Counter con tiempo personalizado
<Counter number={500} time={2000} />