Data & Utilities·loomora → useChrono
useChrono
Intl-backed date manipulation hook operating with zero external date libraries. Supports 15 preset format patterns, multi-language relative phrases, bidirectional time difference math, and calendar month listings.
Interactive live playground
Interact with the hook state and inspect computed return values in real time.
Calculated Output
16 hours ago
2026
Difference
5 days
Total Hours
120 hrs
Chrono Controls
Target Date"2026-10-31"
Comparison Date"2026-11-05"
How to call
Import directly from the Loomora root package in any React client component.
import { useChrono } from 'loomora'
export function Example() {
const { stamp, relative, diff, forward, rewind } = useChrono()
const formatted = stamp(new Date(), { preset: 'fullYear' })
const fromNow = relative(new Date(Date.now() - 3600000))
const delta = diff(new Date(), new Date(Date.now() + 86400000))
return (
<div>
<p>Formatted: {formatted}</p>
<p>Relative: {fromNow}</p>
<p>Days ahead: {delta.differenceInDays}</p>
</div>
)
}Return values & methods
API signatures and utilities returned by this hook.
| Method / Prop | Type | Description |
|---|---|---|
| stamp(date, options) | (date: DateType, props?: FormatDate) => string | number | null | Formats dates using 15 presets or custom token patterns with locale awareness. |
| relative(date, options) | (date: DateType, props?: RelativeDateProps) => string | Calculates humanized relative time strings using Loomora translations or Intl.RelativeTimeFormat. |
| diff(first, second, options) | (first: DateType, second: DateType, props?: CompareDate) => DiffResult | Directional difference calculation across hours, days, weeks, months, and years. |
| timeSpan(dates, type) | (dates: DateRange, type?: DateRangeType) => DateRangeResult | Evaluates if two dates fall within the same interval and formats range strings. |
| forward(date, days) | (date: DateType, days: number) => Date | null | Advances date by specified days handling leap years and month boundaries. |
| rewind(date, days) | (date: DateType, days: number) => Date | null | Rewinds date backward by specified days. |
| listMonths(options) | <T>(props?: GetMonths<T>) => (MonthItem & T)[] | Returns localized 1-12 list of months enriched with Loomora localization translations. |
| pickMonth(key, options) | <T>(key: MonthKey, props?: GetMonths<T>) => MonthItem & T | Retrieves localized metadata for a specific month key (JAN through DEC). |