React
The provider, the translation hooks, the presentation and time zone, and the formatting hook.
@workspace/active-i18n 1.1.0Developmentunreleased, in development in Foundationbaseline ce081dc3
The provider#
TSX
'use client';
import {I18nProvider} from '@workspace/active-i18n/react';
<I18nProvider locale={locale} // resolved by your application translations={translations} // loaded for that locale supportedLanguages={languages} persistLocale={(code) => saveChoice(code)} // optional logger={createLogger} // optional> {children}</I18nProvider>;| Hook | Returns |
|---|---|
use | the translator t |
use | the provider's language |
use | set, the offered languages and the current one |
use | everything above in one object |
use | the presentation: language, profile and time zone, for a formatter |
use | the formatters of active-format bound to that presentation |
Every hook throws outside the provider.
Presentation and time zone#
PresentationProfileProvider hands down the notation profile your application chose (date shape,
number format, …); TimeZoneProvider hands down the time zone, built with fixedTimeZone(zone)
(the host decides) or viewerTimeZone(zone) (the reader's browser decides). Both are optional;
without them the presentation is the bare language.
TSX
const format = useFormatters();format.currency({amount: 1234.5, currency: 'EUR'});format.dateTime('2026-10-21T09:30:00Z');<RecencyTime> shows "3 minutes ago" within a threshold and an absolute date beyond it;
<ViewerDateTime> shows an instant in the reader's own zone.