useTimeZone

useTimeZone resolves the zone a component should interpret instants in. Precedence is prop → provider → "auto":

import { useTimeZone } from '@42-central/ui-react';

const timeZone = useTimeZone(props.timeZone);

new Intl.DateTimeFormat(locale, { timeStyle: 'short', timeZone }).format(instant);

The provider half is IntlProvider.

Unlike useLocale, this defaults to "auto" — following the host — because a wrong zone is wrong data rather than an unfamiliar format. That costs a client-only app nothing, and under SSR it is still mismatch-free: the server renders DEFAULT_TIME_ZONE and the real zone arrives after hydration.

Usage

Only the zone is set here; the locale stays on its own default. The instant is the same in every case — 21:30 UTC, which is already the following day in Tokyo.

const timeZone = useTimeZone();

new Intl.DateTimeFormat(useLocale(), {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone,
}).format(instant)

API

Returns a string — always a concrete IANA zone name.