Localization Hooks

Hooks for translations and locale detection.

`useTranslation()`

Access the translation system. Re-renders when the locale changes.


const { t, locale, setLocale, availableLocales } = useTranslation()
 
return (
  <div>
    <h1>{t('welcome', { name: 'John' })}</h1>
    <button onClick={() => setLocale('de')}>Deutsch</button>
  </div>
)

Property	Type	Description
`t`	`(key: string, params?: Record<string, string \| number>) => string`	Translate a key with optional interpolation
`locale`	`string`	Current active locale
`setLocale`	`(locale: string) => void`	Switch locale at runtime
`availableLocales`	`string[]`	Locales with loaded translations

`useLocale()`

Read the browser’s locale information. Computed once on mount.


const { language, region, timeZone, is24Hour } = useLocale()

Property	Type	Description
`locale`	`string`	Full locale string (e.g. `"en-US"`)
`language`	`string`	Language code (e.g. `"en"`)
`region`	`string`	Region code (e.g. `"US"`)
`languages`	`string[]`	All preferred languages from `navigator.languages`
`timeZone`	`string`	IANA timezone (e.g. `"America/New_York"`)
`is24Hour`	`boolean`	Whether the locale uses 24-hour clock