React

Intégrez i1n avec React en utilisant le SDK i1n ou le mode Bridge avec i18next / react-intl.

Configuration

Exécutez i1n init dans votre projet React. Le CLI détecte automatiquement react-i18next ou i18next s'ils sont présents et configure le format JSON imbriqué.

Vous pouvez utiliser le SDK i1n en mode autonome (en remplaçant entièrement i18next) ou le connecter via le mode Pont pour conserver votre bibliothèque existante.

Mode autonome

Utilisez le modèle de fournisseur React i1n pour une expérience prête à l'emploi. Initialisez avec init(), créez un I1nProvider qui synchronise l'état de la locale avec le SDK, et utilisez le hook useI1n() dans vos composants.

Cette approche assure une sélection d'identifiant régional persistante via localStorage, un changement de langue à l'exécution avec setLocale(), et une complétion automatique entièrement typée via le fichier i1n.d.ts généré — aucune bibliothèque i18n externe n'est nécessaire.

Mode pont avec i18next

Si votre projet utilise i18next, connectez-le en une seule ligne : registerI1n((key, params) => i18next.t(key, params)). La fonction i1n t() délègue désormais à i18next en arrière-plan, mais avec une vérification de type stricte et une autocomplétion.

Pour les projets utilisant react-intl (FormatJS), utilisez : registerI1n((key, params) => intl.formatMessage({ id: key }, params)). Le mode Bridge fonctionne avec n'importe quelle fonction de traduction — passez n'importe quel callback (key, params) => string à registerI1n().

Déploiement

Ajoutez i1n pull à votre étape de build ou à votre pipeline CI/CD. Les fichiers de traduction générés et i1n.d.ts sont validés dans votre dépôt.

Fonctionne avec Vite, Create React App, Remix et tout framework basé sur React.

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

Associé

Tableau de bord

Guide du tableau de bord web i1n : création de compte, organisations, clés API, édition de traductions et gestion d'équipe.

Mode pont

Conservez votre bibliothèque i18n existante tout en ajoutant la saisie semi-automatique sécurisée, la traduction IA et la gestion de fichiers de i1n.