Skip to content

CountdownCircle

Element for counting down time
import { CountdownCircle } from '@ensdomains/thorin'
<CountdownCircle countdownSeconds={30} />

Props
#

name
type
default
description
accessibilityLabel
string
-
-
callback
() => void
-
-
color
any
textSecondary
-
countdownSeconds*
Required
number
-
-
disabled
boolean
-
-
ref
null | string | (instance: HTMLDivElement | null) => void | RefObject<HTMLDivElement>
-
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
size
"small" | "large"
small
-
startTimestamp
number
-
-

Colors
#

<DeleteMe flexDirection="row">

  <CountdownCircle color="blue" countdownSeconds={30} />

  <CountdownCircle color="green" countdownSeconds={30} />

  <CountdownCircle color="indigo" countdownSeconds={30} />

</DeleteMe>

Sizes
#

<DeleteMe flexDirection="row">

  <CountdownCircle countdownSeconds={30} size="small" />

  <CountdownCircle countdownSeconds={30} size="large" />

</DeleteMe>

Disabled
#

<CountdownCircle countdownSeconds={30} disabled />
Edit on GitHub