Countdown

Temporizador de contagem regressiva com formato e estilização personalizáveis.

Importação

import { Countdown } from 'asterui'

Exemplos

Countdown Básico

Temporizador de contagem regressiva simples.

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

Com Dias

Incluir dias na contagem regressiva.

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

Tamanhos

Diferentes variantes de tamanho.

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

Com Rótulos

Mostrar rótulos abaixo de cada unidade.

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 em Caixa

Cada unidade em uma caixa estilizada.

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

Com Callback

Executar callback quando a contagem regressiva terminar.

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`

Propriedade	Descrição	Tipo	Padrão
`value`	Timestamp alvo em milissegundos ou objeto Date	`number \| Date`	-
`format`	String de formato: ‘D’ dias, ‘H’ horas, ‘M’ minutos, ‘S’ segundos	`string`	`'HH:MM:SS'`
`onFinish`	Callback quando a contagem regressiva chega a zero	`() => void`	-
`onChange`	Callback em cada tick com tempo restante	`(value: number) => void`	-
`size`	Variante de tamanho	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`showLabels`	Mostrar rótulos abaixo de cada unidade	`boolean`	`false`
`labels`	Rótulos personalizados para cada unidade	`{ days?: string, hours?: string, minutes?: string, seconds?: string }`	-
`boxed`	Mostrar estilo de caixa ao redor de cada unidade	`boolean`	`false`
`className`	Classes CSS adicionais	`string`	-

Acessibilidade

Usa aria-live para anunciar atualizações da contagem regressiva
Fornece aria-label para cada unidade de contagem regressiva
Rótulos são visualmente associados com seus valores