---
title: "@playstack/i18n-react"
description: "Isolated React locale providers, typed catalog hooks and shared UI message composition."
tags: ["package","foundation","i18n","react","free"]
---

{/* package-access:start */}

> **Free.** MIT licensed. Check preview availability before installing. See [package access](/docs/packages#access-policy).

{/* package-access:end */}

This independently installable binding supports React 18.2/19 without Next, Chakra, server auth or an ICU runtime. It is classified Free under the Laravel localization baseline.

```ts
import { createI18nReact } from '@playstack/i18n-react'

// catalogs is an application-owned createCatalogStore() result.
// Create bindings once outside render.
export const { I18nProvider, useLocale, useMessage, useMessages, useFormatters } = createI18nReact(catalogs)
```

Wrap consumers in `I18nProvider` with `locale` and `timeZone`. Message hooks return resolved records, including fallback locale, rather than interpolated strings. The host chooses its ICU/rich-text renderer. Providers are isolated; hooks outside their matching provider fail explicitly.

For [App UI](/docs/packages/ui/app-ui) and [Admin UI](/docs/packages/ui/admin-ui), supply `formatMessage` to this provider, or use `MessageCatalogProvider` alongside an existing locale context. Include both package source namespaces. See [UI localization](/docs/frameworks/ui-localization) for a complete composition and editable artifacts.

The shared package-message boundary returns plain text for visible and accessible labels. It rejects non-string output, preserves explicit component overrides and retains English defaults when no provider is installed. It is not an HTML renderer.

Locale routing, document language/direction, cookies, preferences and consistent SSR/client locale/time-zone inputs remain application-owned. Ship only client-safe catalogs. Packed localized Next and React fixtures do not replace real translation, RTL, accessibility or native acceptance tests.

{/* package-install:start */}

## Install

After confirming [preview access](/docs/packages#access-policy), install the package at your application's shared Playstack version:

```sh
npm install --save-exact @playstack/i18n-react@0.1.0-beta.1
```

Check the peer requirements below before choosing a runtime or provider.

{/* package-install:end */}

{/* package-reference:start */}

## API entry points and requirements

Reference snapshot: `@playstack/i18n-react@0.1.0-beta.1`. Import only the entry point your runtime needs. Paths below are relative to the installed package; use **Go to Definition** in your editor to inspect exact parameters, return types and overloads. Do not import the declaration-file paths directly.

| Public entry point | Declaration file |
| --- | --- |
| `@playstack/i18n-react` | `./dist/index.d.ts` |
| `@playstack/i18n-react/package.json` | No TypeScript declaration (asset or metadata export). |

Node.js engine requirement: `>=20`. This is not a claim that every entry point works in browsers or Workers.

### Peer dependencies

Keep existing framework versions that satisfy these ranges. Install optional peers only when using the corresponding adapter. The package manager resolves ordinary dependencies separately.

| Peer | Compatible range | When needed |
| --- | --- | --- |
| `@playstack/i18n` | `0.1.0-beta.1` | Required by the package. |
| `react` | `^18.2.0 \|\| ^19.0.0` | Required by the package. |

For a complete first program, start with [Getting started](/docs/getting-started). For API lookup and partial-example conventions, see [Reading the reference](/docs/packages#reading-the-reference). Provider failures, lifecycle requirements and application responsibilities remain described in the guide above; types alone do not establish production safety.

{/* package-reference:end */}