@intlayer/react-i18next : adaptateur de compatibilité pour react-i18next

Pour un tutoriel complet et détaillé étape par étape, consultez notre Guide de Migration react-i18next.

L'adaptateur de compatibilité d'Intlayer vous permet de migrer depuis react-i18next sans aucune modification de vos importations de code source.

Ce qu'il faut faire

Pour initialiser le projet, exécutez :

npx intlayer init --interactive

Lors de l'initialisation, Intlayer installera @intlayer/react-i18next et créera intlayer.config.ts. Dans votre bundler (comme Vite), appliquez le plugin Intlayer :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { reactI18nextVitePlugin } from "@intlayer/react-i18next/plugin";

export default defineConfig({
  plugins: [react(), reactI18nextVitePlugin()],
});

Fonctionnement interne

Le reactI18nextVitePlugin encapsule le plugin vite-intlayer principal et injecte des alias de résolution pour react-i18next et i18next, les redirigeant vers @intlayer/react-i18next et @intlayer/i18next.

Fonctionnement interne :

• useTranslation & withTranslation: Réécrit pour utiliser les hooks natifs d'Intlayer, vous donnant l'autocomplétion TypeScript automatique pour vos clés de dictionnaire. Il prend en charge les namespaces de manière transparente (ex. t('namespace:key')).
• Plurals & Context: Gère la pluralisation basée sur des suffixes d'i18next (key_one, key_other) en utilisant Intl.PluralRules natif et les suffixes de contexte (key_male).
• <Trans> Component: Ré-implémenté pour supporter la prop components, les formes objet et tableau, et les tags numérotés <1>...</1> mappant directement à vos nœuds React.
• i18n instance: Résout les clés directement depuis Intlayer sans récupérer de gros fichiers JSON, ce qui réduit considérablement la taille du bundle.

Pour comprendre d'où viennent ces bibliothèques, lisez l'histoire de l'i18n en JavaScript.