React i18n Made Simple
Type-safe internationalization for React applications with hooks, context, and seamless CDN delivery.
Setup
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intlWrap 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>;
}Capabilities
Features
Get started with Better I18N in your React app in minutes.
React Hooks API (useTranslations)
Full TypeScript support with autocomplete
Lazy loading for optimal bundle size
ICU message format with pluralization
Variable interpolation and formatting
React Context for locale management
SSR and SSG support
Hot reload during development
DevTools integration
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>
);
}Provider fetches from the CDN once
Every component reads from context
60s in-memory cache, offline fallback
Keys typed from your project
Ecosystem
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.
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.
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.
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.
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.
Keep reading
Related
Related Articles
How to Add i18n to Shopify Hydrogen (Complete Guide)
Shopify Hydrogen is the modern way to build custom storefronts — but adding internationalization (i18n) can be challenging. You need locale-aware routing,...
Read More →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 →Introducing the Better i18n CLI: Manage Translations from Your Terminal
Until now, managing translation keys on Better i18n meant using the dashboard UI or connecting an MCP server to your AI assistant. Both work great — but...
Read More →Explore i18n for Other Frameworks
“We use Better I18N across our Next.js platform and mobile apps. One tool for every product — translations go live the moment we push, no redeploys, no friction.”
Samet Selcuk
Founder, Hellospace