Countdown

Minuteur de compte à rebours avec format et style personnalisables.

Import

import { Countdown } from 'asterui'

Exemples

Compte à rebours de base

Minuteur de compte à rebours 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

Avec jours

Inclure les jours dans le compte à rebours.

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

Tailles

Différentes variantes de taille.

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

Avec étiquettes

Afficher les étiquettes sous chaque unité.

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

Style encadré

Chaque unité dans une boîte stylisée.

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

Avec callback

Exécuter un callback lorsque le compte à rebours se termine.

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`

Propriété	Description	Type	Défaut
`value`	Horodatage cible en millisecondes ou objet Date	`number \| Date`	-
`format`	Chaîne de format : ‘D’ jours, ‘H’ heures, ‘M’ minutes, ‘S’ secondes	`string`	`'HH:MM:SS'`
`onFinish`	Callback lorsque le compte à rebours atteint zéro	`() => void`	-
`onChange`	Callback à chaque tic avec le temps restant	`(value: number) => void`	-
`size`	Variante de taille	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`showLabels`	Afficher les étiquettes sous chaque unité	`boolean`	`false`
`labels`	Étiquettes personnalisées pour chaque unité	`{ days?: string, hours?: string, minutes?: string, seconds?: string }`	-
`boxed`	Afficher le style encadré autour de chaque unité	`boolean`	`false`
`className`	Classes CSS supplémentaires	`string`	-

Accessibilité

Utilise aria-live pour annoncer les mises à jour du compte à rebours
Fournit aria-label pour chaque unité de compte à rebours
Les étiquettes sont visuellement associées à leurs valeurs