React SDK

React i18n en toute simplicité

Internationalisation type-safe pour les applications React avec hooks, contexte et diffusion CDN fluide.

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.

terminal

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.

App.tsx

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.

MyComponent.tsx

import { useTranslations } from '@better-i18n/use-intl';

function MyComponent() {
  const t = useTranslations('common');
  return <h1>{t('welcome')}</h1>;
}

Capabilities

Fonctionnalités

Démarrez avec Better I18N dans votre app React en quelques minutes.

API de hooks React (useTranslations)

Support TypeScript complet avec autocomplétion

Chargement différé pour une taille de bundle optimale

Format de message ICU avec pluriels

Interpolation et formatage de variables

React Context pour la gestion de la locale

Support SSR et SSG

Hot reload pendant le développement

Intégration DevTools

MyComponent.tsx

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

useTranslations('common')

Every component reads from context

TtlCache · 60s

60s in-memory cache, offline fallback

t('welcome')

Keys typed from your project

Ecosystem

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.

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.

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.

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.

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.

Keep reading

Découvrir l’i18n pour d’autres frameworks

Next.js i18n Vue i18n Nuxt i18n Angular i18n Svelte i18n Vite i18n Remix & Hydrogen i18n Expo i18n iOS i18n Flutter i18n TanStack Start i18n Server i18n Hono i18n Rust i18n

“Nous utilisons Better I18N sur notre plateforme Next.js et nos applications mobiles. Un seul outil pour chaque produit : les traductions sont en ligne dès que nous poussons le code, sans redéploiement ni friction.”

Samet Selcuk

Fondateur, Hellospace

Commencez à construire avec React i18n

Offre gratuite disponible. Aucune carte bancaire requise.

Commencer gratuitement Lire la doc