Chronometer

El componente Chronometer muestra una cuenta regresiva en base al tiempo dado en segundos, actualizándose cada segundo. Permite personalizar el formato del tiempo mostrado y ejecutar una acción cada vez que el tiempo cambia.

Ejemplo

Importación

Para importar el componente Chronometer, se puede hacer desde fenextjs

import { Chronometer } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
time	number	no	100	El tiempo inicial en segundos que se mostrará y del cual el cronómetro comenzará la cuenta regresiva.
onChange	(time: number) => void	no	undefined	Función que se ejecuta cada vez que el tiempo cambia, recibiendo el nuevo tiempo como parámetro.
min	number	no	0	El tiempo mínimo al que puede llegar el cronómetro, en segundos.
optionsTimeToText	getTimeToTextProps	no	{days: false, hours: true,minutes: true,seconds: true }	Opciones para personalizar el formato del tiempo mostrado, como si incluir o no los días.
className	string	no	''	Clase CSS personalizada para el componente.

Storybook

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

Usos

Cronómetro básico

<Chronometer time={120} />

Cronómetro con acción al cambiar el tiempo

<Chronometer
  time={60}
  onChange={(newTime) => console.log("Nuevo tiempo:", newTime)}
/>

Cronómetro con formato de tiempo personalizado

<Chronometer
  time={3600}
  optionsTimeToText={{ hours: true, minutes: true, seconds: true }}
/>

Chronologicallist Cols