Timer
Used to record the time elapsed from zero or since a specified target time.
01
days
16
hours
00
minutes
00
seconds
Examples
Learn how to use the Timer component in your project. Let's take a look at the most basic example:
import { Timer } from '@ark-ui/react'
export const Basic = () => (
<Timer.Root targetMs={60 * 60 * 1000}>
<Timer.Area>
<Timer.Item type="days" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="hours" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="minutes" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" />
</Timer.Area>
<Timer.Control>
<Timer.ActionTrigger action="start">Play</Timer.ActionTrigger>
<Timer.ActionTrigger action="resume">Resume</Timer.ActionTrigger>
<Timer.ActionTrigger action="pause">Pause</Timer.ActionTrigger>
</Timer.Control>
</Timer.Root>
)
import { Timer } from '@ark-ui/solid'
export const Basic = () => (
<Timer.Root targetMs={60 * 60 * 1000}>
<Timer.Area>
<Timer.Item type="days" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="hours" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="minutes" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" />
</Timer.Area>
<Timer.Control>
<Timer.ActionTrigger action="start">Play</Timer.ActionTrigger>
<Timer.ActionTrigger action="resume">Resume</Timer.ActionTrigger>
<Timer.ActionTrigger action="pause">Pause</Timer.ActionTrigger>
</Timer.Control>
</Timer.Root>
)
<script setup lang="ts">
import { Timer } from '@ark-ui/vue'
</script>
<template>
<Timer.Root :targetMs="60 * 60 * 1000">
<Timer.Area>
<Timer.Item type="days" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="hours" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="minutes" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" />
</Timer.Area>
<Timer.Control>
<Timer.ActionTrigger action="start">Play</Timer.ActionTrigger>
<Timer.ActionTrigger action="resume">Resume</Timer.ActionTrigger>
<Timer.ActionTrigger action="pause">Pause</Timer.ActionTrigger>
</Timer.Control>
</Timer.Root>
</template>
Countdown Timer
You can create a countdown timer by setting the targetMs prop to a future timestamp:
import { Timer } from '@ark-ui/react'
export const Countdown = () => (
<Timer.Root autoStart countdown startMs={60 * 60 * 500}>
<Timer.Area>
<Timer.Item type="days" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="hours" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="minutes" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" />
</Timer.Area>
</Timer.Root>
)
import { Timer } from '@ark-ui/solid'
export const Countdown = () => (
<Timer.Root autoStart countdown startMs={60 * 60 * 500}>
<Timer.Area>
<Timer.Item type="days" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="hours" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="minutes" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" />
</Timer.Area>
</Timer.Root>
)
<script setup lang="ts">
import { Timer } from '@ark-ui/vue'
</script>
<template>
<Timer.Root :autoStart="true" :countdown="true" :startMs="60 * 60 * 500">
<Timer.Area>
<Timer.Item type="days" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="hours" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="minutes" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" />
</Timer.Area>
</Timer.Root>
</template>
Timer Events
The Timer component provides events that you can listen to for various timer-related actions.
- The
onCompleteevent is triggered when the timer reaches its target time. - The
onTickevent is called on each timer update, providing details about the current timer state.
import { Timer } from '@ark-ui/react'
export const Events = () => (
<Timer.Root
targetMs={5 * 1000}
onComplete={() => console.log('Timer completed')}
onTick={(details) => console.log('Tick:', details.formattedTime)}
>
<Timer.Item type="seconds" />
</Timer.Root>
)
import { Timer } from '@ark-ui/solid'
export const Events = () => (
<Timer.Root
targetMs={5 * 1000}
onComplete={() => console.log('Timer completed')}
onTick={(details) => console.log('Tick:', details.formattedTime)}
>
<Timer.Item type="seconds" />
</Timer.Root>
)
<script setup lang="ts">
import { Timer } from '@ark-ui/vue'
</script>
<template>
<Timer.Root
:targetMs="5 * 1000"
@complete="() => console.log('Timer completed')"
@tick="(details) => console.log('Tick:', details.formattedTime)"
>
<Timer.Item type="seconds" />
</Timer.Root>
</template>