React i18n Made Simple
Type-safe internationalization for React applications with hooks, context, and seamless CDN delivery.
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}Features
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}Works with Popular React i18n Libraries
Better i18n isn't a replacement for your favorite i18n library - it's the translation management layer that makes them even more powerful.
Better i18n + react-intl
The most popular React i18n library with ICU message format support. Used by thousands of production apps.
Better i18n syncs your translations directly to react-intl JSON format. Edit in our dashboard, see changes in your app instantly.
Better i18n + react-i18next
Powerful i18n framework for React based on i18next. Features like namespaces, interpolation, and plurals built-in.
Export to i18next-compatible JSON with namespaces. Better i18n handles the translation workflow, i18next handles the runtime.
Better i18n + FormatJS
A set of libraries for internationalization that includes react-intl. Supports ICU Message syntax and CLDR data.
Better i18n supports ICU message format natively. Manage complex plurals and selects visually, export to FormatJS format.
Better i18n + Lingui
A readable, automated, and optimized i18n library. Great DX with macro-based message extraction.
Extract messages with Lingui CLI, manage translations in Better i18n, sync back automatically via GitHub integration.
Quick Start
Get started with Better i18n in your React app in minutes.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Related Articles
Django i18n with AI Translation: Complete Setup Guide
Django i18n with AI Translation: Complete Setup Guide Django ships with a mature internationalization (i18n) framework built on GNU gettext. When you...
Read more →Developer Experience Deep Dive: How Better i18n's Platform UX Makes Localization Fast and Intuitive
Localization platforms have a reputation for clunky interfaces, slow editors, and workflows that feel like they were designed by committee. We built...
Read more →Media Management with Unsplash Integration: A Complete CMS Guide
Managing media alongside translations has always been an afterthought in most i18n tools. You translate the text, then manually handle images in a...
Read more →