React i18n en toute simplicité
Internationalisation type-safe pour les applications React avec hooks, contexte et diffusion CDN fluide.
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>;
}Fonctionnalités
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>
}Fonctionne avec les bibliothèques i18n React populaires
Better i18n ne remplace pas votre bibliothèque i18n préférée : c’est la couche de gestion de traduction qui les rend encore plus puissantes.
Better i18n + react-intl
La bibliothèque i18n React la plus populaire avec support du format de messages ICU. Utilisée par des milliers d’apps en production.
Better i18n synchronise vos traductions directement au format JSON de react-intl. Modifiez dans notre dashboard et voyez les changements dans votre app instantanément.
Better i18n + react-i18next
Framework i18n puissant pour React basé sur i18next. Des fonctionnalités comme les namespaces, l’interpolation et les pluriels sont intégrées.
Exportez vers du JSON compatible i18next avec des namespaces. Better i18n gère le workflow de traduction, i18next gère l’exécution au runtime.
Better i18n + FormatJS
Un ensemble de bibliothèques d’internationalisation qui inclut react-intl. Prend en charge la syntaxe de messages ICU et les données CLDR.
Better i18n prend en charge nativement le format de messages ICU. Gérez visuellement les pluriels et selects complexes, puis exportez au format FormatJS.
Better i18n + Lingui
Une bibliothèque i18n lisible, automatisée et optimisée. Excellente DX avec extraction de messages basée sur des macros.
Extrayez les messages avec Lingui CLI, gérez les traductions dans Better i18n, puis resynchronisez automatiquement via l’intégration GitHub.
Démarrage rapide
Démarrez avec Better i18n dans votre app React en quelques 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
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 avec Traduction IA : Guide Complet de Configuration
Django i18n avec Traduction IA : Guide Complet de Configuration Django est livré avec un framework d'internationalisation (i18n) mature construit sur GNU...
Read more →Better i18n vs. Crowdin: An Honest Comparison for Modern App Teams
Crowdin has been the default choice for translation management for years. It's mature, feature-rich, and most localization engineers have used it at some...
Read more →Découvrir l’i18n pour d’autres frameworks
Commencez à construire avec React i18n
Offre gratuite disponible. Aucune carte bancaire requise.