useLocale

useLocale resolves the locale a component should format in. Precedence is prop → provider → "en-US", so a component passes its own prop straight in and gets back something it can hand to Intl:

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

const locale = useLocale(props.locale);

new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(date);

The provider half is IntlProvider. With none mounted it returns DEFAULT_LOCALE rather than the host's locale — deliberately, so server and client markup can't disagree. Pass "auto" to opt into following the browser.

Usage

Only the locale is set here; the time zone stays on its own default, because the two are independent.

const locale = useLocale();

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

API

Returns a string — always a concrete tag.

SSR

"auto" is resolved through useSyncExternalStore with a fixed server snapshot (DEFAULT_LOCALE), the same shape as useMediaQuery and useLocalStorage: the server and the first client render agree by construction, and the real value arrives right after hydration. See Internationalization for when that one-frame correction is visible.