1---
2category: Animation
3---
4 
5# useTimestamp
6 
7Reactive current timestamp
8 
9## Usage
10 
11```ts
12import { useTimestamp } from '@vueuse/core'
13 
14const timestamp = useTimestamp({ offset: 0 })
15```
16 
17```ts
18import { useTimestamp } from '@vueuse/core'
19// ---cut---
20const { timestamp, pause, resume } = useTimestamp({ controls: true })
21```
22 
23## Component Usage
24 
25```vue
26<template>
27  <UseTimestamp v-slot="{ timestamp, pause, resume }">
28    Current Time: {{ timestamp }}
29    <button @click="pause()">
30      Pause
31    </button>
32    <button @click="resume()">
33      Resume
34    </button>
35  </UseTimestamp>
36</template>
37```
38 
39## Type Declarations
40 
41```ts
42export interface UseTimestampOptions<
43  Controls extends boolean,
44> extends ConfigurableScheduler {
45  /**
46   * Expose more controls
47   *
48   * @default false
49   */
50  controls?: Controls
51  /**
52   * Offset value adding to the value
53   *
54   * @default 0
55   */
56  offset?: number
57  /**
58   * Update the timestamp immediately
59   *
60   * @deprecated Please use `scheduler` option instead
61   * @default true
62   */
63  immediate?: boolean
64  /**
65   * Update interval, or use requestAnimationFrame
66   *
67   * @deprecated Please use `scheduler` option instead
68   * @default requestAnimationFrame
69   */
70  interval?: "requestAnimationFrame" | number
71  /**
72   * Callback on each update
73   */
74  callback?: (timestamp: number) => void
75}
76export type UseTimestampReturn<Controls extends boolean> = Controls extends true
77  ? {
78      timestamp: ShallowRef<number>
79    } & Pausable
80  : ShallowRef<number>
81/**
82 * Reactive current timestamp.
83 *
84 * @see https://vueuse.org/useTimestamp
85 * @param options
86 */
87export declare function useTimestamp(
88  options?: UseTimestampOptions<false>,
89): ShallowRef<number>
90export declare function useTimestamp(options: UseTimestampOptions<true>): {
91  timestamp: ShallowRef<number>
92} & Pausable
93```
94