Counter

El componente Counter es un componente que muestra un numero en aumento hasta llegar al numero establecido.

Ejemplo

Importacion

Para importar el componente Counter, se puede hacer desde fenextjs o fenextjs-component

import { Counter, CounterProps } from "fenextjs/cjs/component/Counter";

o

import { Counter, CounterProps } from "fenextjs-component/cjs/Counter";

Parametros

PropiedadTipoRequeridoDefaultDescripción
numbernumberNúmero a mostrar.
textReactNodenoundefinedTexto a mostrar. Por defecto, no se muestra texto.
timenumberno1000Tiempo para incrementar el número en milisegundos.
decimalnumberno2Número de decimales a mostrar en el número.
parseNumber(n: number) => ReactNodenoparseNumberCountFunción para formatear el número.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

  • Uso básico del componente Counter
<Counter
  number={123.456}
  text={<span>Texto adicional</span>}
  time={2000}
  decimal={3}
  parseNumber={(n) => <strong>{n}</strong>}
/>