Texto
Gratis
Odómetro
Contador numérico cuyas columnas ruedan dígito por dígito hasta el valor final, con prefijo, sufijo y separadores configurables. Útil para métricas y precios.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 14 (12 ajustables)
$1,284,930 MXN
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { Odometro } from "furin";También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| value | number | 0 | Número que se muestra; si cambia, las columnas ruedan hasta el nuevo valor. |
| prefix | string | "" | Texto antes del número, por ejemplo "$". |
| suffix | string | "" | Texto después del número, por ejemplo " MXN" o "%". |
| separator | string | "," | Separador de miles ("" para no separar). |
| decimalSeparator | string | "." | Separador decimal. |
| decimals | number | 0 | Cuántos decimales se muestran. |
| duration | number | 1800 | Duración del giro de cada columna, en milisegundos. |
| stagger | number | 90 | Retraso extra entre una columna y la siguiente (de izquierda a derecha), en milisegundos. |
| easing | string | "cubic-bezier(0.16, 1, 0.3, 1)" | Curva de la animación (cualquier valor válido de transition-timing-function). |
| animateOnMount | boolean | true | Si es true, al montar rueda desde cero hasta el valor. |
| color | string | "heredado" | Color de los dígitos (por defecto hereda el del texto). |
| affixColor | string | "texto atenuado" | Color del prefijo y el sufijo (por defecto, el del texto atenuado). |
| className | string | "" | Clase CSS extra para el contenedor. |
| style | CSSProperties | "{}" | Estilos en línea del contenedor (aquí va el tamaño y la fuente). |