React

Integrate i1n with React using the i1n SDK or Bridge Mode with i18next / react-intl.

Setup

Run i1n init in your React project. The CLI auto-detects react-i18next or i18next if present and configures nested JSON format.

You can use the i1n SDK in standalone mode (replacing i18next entirely) or connect it via Bridge Mode to keep your existing library.

Standalone Mode

Use the i1n React provider pattern for a plug-and-play experience. Initialize with init(), create an I1nProvider that syncs locale state with the SDK, and use the useI1n() hook in your components.

This approach provides persistent locale selection via localStorage, runtime language switching with setLocale(), and full type-safe autocomplete via the generated i1n.d.ts — no external i18n library needed.

Bridge Mode with i18next

If your project uses i18next, connect it with one line: registerI1n((key, params) => i18next.t(key, params)). The i1n t() function now delegates to i18next under the hood, but with strict type checking and autocomplete.

For projects using react-intl (FormatJS), use: registerI1n((key, params) => intl.formatMessage({ id: key }, params)). Bridge Mode works with any translation function — pass any (key, params) => string callback to registerI1n().

Deployment

Add i1n pull to your build step or CI/CD pipeline. The generated translation files and i1n.d.ts are committed to your repository.

Works with Vite, Create React App, Remix, and any React-based framework.

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

Dashboard

Guide to the i1n web dashboard: account creation, organizations, API keys, translation editing, and team management.

Bridge Mode

Keep your existing i18n library while adding i1n's type-safe autocomplete, AI translation, and file management.