useTimeAgoIntl

Category

Time

Export Size

1.15 kB

Last Changed

5 days ago

Reactive time ago with i18n supported. Automatically update the time ago string when the time changes. Powered by Intl.RelativeTimeFormat.

Demo

Usage

import { useTimeAgoIntl } from '@reause/core'

const timeAgoIntl = useTimeAgoIntl(new Date(2021, 0, 1), { locale: 'en' }) // string, auto-updates over time

// also accepts timestamps and date strings
const fromNumber = useTimeAgoIntl(1633036800000)
const fromString = useTimeAgoIntl('2024-01-01T00:00:00.000Z')

Non-Reactivity Usage

In case you don't need the reactivity, you can use the formatTimeAgoIntl function to get the formatted string instead of a controllable state.

import { formatTimeAgoIntl } from '@reause/core'

const timeAgoIntl = formatTimeAgoIntl(new Date(2021, 0, 1)) // string

Type Declarations

export interface TimeAgoUnit {
    name: Intl.RelativeTimeFormatUnit;
    ms: number;
}

export interface FormatTimeAgoIntlOptions {
    locale?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
    relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions;
    insertSpace?: boolean;
    joinParts?: (parts: Intl.RelativeTimeFormatPart[], locale?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale) => string;
    units?: TimeAgoUnit[];
}

export interface UseTimeAgoIntlOptions extends FormatTimeAgoIntlOptions {
    updateInterval?: number;
}

export function useTimeAgoIntl(time: Date | number | string, options?: UseTimeAgoIntlOptions): string

export function formatTimeAgoIntl(from: Date, options?: FormatTimeAgoIntlOptions, now?: Date | number): string

export function formatTimeAgoIntlParts(parts: Intl.RelativeTimeFormatPart[], options?: FormatTimeAgoIntlOptions): string

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

cf61f - fix(core): resolve useTimeAgoIntl audit findings (#670)

55039 - fix(core): resolve useNow audit findings (#610)