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
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 →Plongée dans l'expérience développeur : comment l'UX de la plateforme Better i18n rend la localisation rapide et intuitive
Les plateformes de localisation ont la réputation d'avoir des interfaces maladroites, des éditeurs lents et des workflows qui semblent conçus par un...
Read more →Gestion des médias avec l'intégration Unsplash : Guide CMS complet
La gestion des médias en parallèle des traductions a toujours été une réflexion secondaire dans la plupart des outils i18n. Vous traduisez le texte, puis...
Read more →Découvrir l’i18n pour d’autres frameworks
Commencez à construire avec React i18n
Offre gratuite disponible. Aucune carte bancaire requise.