---
id: "packages/active-i18n/react"
title: "React"
description: "The provider, the translation hooks, the presentation and time zone, and the formatting hook."
url: "/packages/active-i18n/react"
locale: "en"
revision: "39c30a2a1e57c801"
---

# React

## 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 |
| --- | --- |
| `useTranslations()` | the translator `t` |
| `useLocale()` | the provider's language |
| `useLocaleSwitcher()` | `setLocale`, the offered languages and the current one |
| `useI18n()` | everything above in one object |
| `usePresentation()` | the presentation: language, profile and time zone, for a formatter |
| `useFormatters()` | 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.