Integrations

Integrate TanStack i18n routing with message and translation libraries. Explore guides for react-intl, use-intl, react-i18next, and Paraglide.

TanStack i18n owns locale in the URL — redirects, cookies, server entry, and setLocale. A translation library owns message catalogs, t(), and formatting. Integrations show how to wire both without coupling routing to copy.

Split of concerns

Layer	Owns
`@Wadiou/tanstack-i18n`	URL locale, first visit, persist/infer adapters, `getLocale`, `setLocale`
Message library	JSON catalogs, translated UI, dates and numbers

Overview table: Get started — locale vs messages.

Why use-intl first

use-intl is the framework-agnostic core from the next-intl ecosystem — same hooks (useTranslations, useLocale) whether you stay on TanStack Start or later adopt next-intl on Next.js. We document it as the primary recipe; other libraries follow the same pattern with different provider APIs.

Prerequisites

Complete the guides through Change locale — config, runtime, Start server entry, Router helpers, and createLocaleProvider / setLocale on the same bilingual marketing site (en, ar).

use-intl (React)

Full step-by-step — IntlProvider, loadMessages, root beforeLoad, switch flow.

Paraglide (React & Solid)

Compile-time messages — recipe coming soon.

react-intl (React)

FormatJS / react-intl — recipe coming soon.

react-i18next (React)

i18next / react-i18next — recipe coming soon.

Solid Primitives i18n (Solid)

Lightweight reactive i18n for SolidJS — recipe coming soon.

What's next

If you are migrating from a library that also owned URL locale routing (next-intl App Router middleware, Remix i18n stacks), see Migration when that section ships. use-intl alone is an integration — it pairs with this package; it is not a migration source.