Intégration React : Documentation du Hook useI18n

Cette section fournit des instructions détaillées sur la manière d’utiliser le hook useI18n dans les applications React, permettant une localisation efficace du contenu.

Importer useI18n dans React

Le hook useI18n peut être importé et intégré dans les applications React selon le contexte comme suit :

• Composants Client :

  typescript

  Copier le code

  Copier le code dans le presse-papiers

  import { useI18n } from "react-intlayer"; // Utiliser dans les composants React côté client

• Composants Serveur :

Paramètres

Ce hook accepte deux paramètres :

1. namespace : Un espace de noms de dictionnaire pour délimiter les clés de traduction.
2. locale (optionnel) : La locale souhaitée. Si elle n'est pas spécifiée, la locale du contexte sera utilisée par défaut.

Dictionnaire

Toutes les clés du dictionnaire doivent être déclarées dans des fichiers de déclaration de contenu afin d'améliorer la sécurité des types et d'éviter les erreurs. Les instructions de configuration sont disponibles ici.

Exemples d'utilisation dans React

Exemples d'utilisation du hook useI18n dans des composants React :

import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};

import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* Affiche le titre */}      <p>{t("description")}</p> {/* Affiche la description */}    </div>  );};

import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* Affiche le titre */}      <p>{t("description")}</p> {/* Affiche la description */}    </div>  );};

Gestion des attributs

Lors de la localisation des attributs, accédez aux valeurs de traduction de manière appropriée :

<!-- Pour les attributs d'accessibilité (par exemple, aria-label), utilisez .value car des chaînes pures sont requises --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

Ressources supplémentaires

• Éditeur visuel Intlayer : Pour une expérience de gestion de contenu plus intuitive, consultez la documentation de l'éditeur visuel ici.

Cette section couvre spécifiquement l'intégration du hook useI18n dans les applications React, simplifiant le processus de localisation et garantissant la cohérence du contenu à travers différentes locales.

Historique de la documentation

• 6.0.0 - 29-06-2025 : Rédaction initiale de la documentation du hook useI18n