Countdown

Temporizador de cuenta regresiva con formato y estilo personalizables.

Importar

import { Countdown } from 'asterui'

Ejemplos

Cuenta Regresiva Básica

Temporizador de cuenta regresiva simple.

</>

01:00:00

import { Countdown } from 'asterui'
import { useMemo } from 'react'

function App() {
  const target = useMemo(() => Date.now() + 60 * 60 * 1000, [])
  
  return (
      <Countdown value={target} />
    )
}

export default App

Con Días

Incluye días en la cuenta regresiva.

</>

03:00:00:00

import { Countdown } from 'asterui'
import { useMemo } from 'react'

function App() {
  const target = useMemo(() => Date.now() + 3 * 24 * 60 * 60 * 1000, [])
  
  return (
      <Countdown value={target} format="DD:HH:MM:SS" />
    )
}

export default App

Tamaños

Diferentes variantes de tamaño.

</>

01:00:00

01:00:00

01:00:00

01:00:00

import { Countdown, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 60 * 60 * 1000)
  
  return (
      <Space direction="vertical" size="lg">
        <Countdown value={target} size="xs" />
        <Countdown value={target} size="sm" />
        <Countdown value={target} size="md" />
        <Countdown value={target} size="lg" />
      </Space>
    )
}

export default App

Con Etiquetas

Muestra etiquetas debajo de cada unidad.

</>

02days

00hours

00min

00sec

import { Countdown } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 2 * 24 * 60 * 60 * 1000)
  
  return (
      <Countdown
        value={target}
        format="DD:HH:MM:SS"
        showLabels
      />
    )
}

export default App

Estilo con Cajas

Cada unidad en una caja con estilo.

</>

01days

00hours

00min

00sec

import { Countdown } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 24 * 60 * 60 * 1000)
  
  return (
      <Countdown
        value={target}
        format="DD:HH:MM:SS"
        showLabels
        boxed
      />
    )
}

export default App

Con Callback

Ejecuta callback cuando la cuenta regresiva termina.

</>

00:20

import { Countdown, notification } from 'asterui'
import { useState } from 'react'

function App() {
  const [target, setTarget] = useState(() => Date.now() + 20 * 1000)
  
  const handleFinish = () => {
    notification.success({ message: 'Countdown finished!' })
    setTarget(Date.now() + 20 * 1000) // Restart
  }
  
  return (
      <Countdown
        key={target}
        value={target}
        format="MM:SS"
        onFinish={handleFinish}
      />
    )
}

export default App

API

Countdown

Propiedad	Descripción	Tipo	Predeterminado
value	Marca de tiempo objetivo en milisegundos u objeto Date	number | Date	-
format	Cadena de formato: ‘D’ días, ‘H’ horas, ‘M’ minutos, ‘S’ segundos	string	'HH:MM:SS'
onFinish	Callback cuando la cuenta regresiva llega a cero	() => void	-
onChange	Callback en cada tick con tiempo restante	(value: number) => void	-
size	Variante de tamaño	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
showLabels	Mostrar etiquetas debajo de cada unidad	boolean	false
labels	Etiquetas personalizadas para cada unidad	{ days?: string, hours?: string, minutes?: string, seconds?: string }	-
boxed	Mostrar estilo de caja alrededor de cada unidad	boolean	false
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa aria-live para anunciar actualizaciones de cuenta regresiva
• Proporciona aria-label para cada unidad de cuenta regresiva
• Las etiquetas están asociadas visualmente con sus valores