Intégration React : Documentation du hook useDictionary

Cette section fournit des instructions détaillées sur l'utilisation du hook useDictionary dans les applications React, permettant une gestion efficace du contenu localisé sans éditeur visuel.

Importation de useDictionary dans React

Le hook useDictionary peut être intégré dans les applications React en l'important selon le contexte :

• Composant Client :

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

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

  const { useDictionary } = require("react-intlayer"); // Utilisé dans les composants React côté client

• Composant Serveur :

  import { useDictionary } from "react-intlayer/server"; // Utilisé dans les composants React côté serveur

  import { useDictionary } from "react-intlayer/server"; // Utilisé dans les composants React côté serveur

  const { useDictionary } = require("react-intlayer/server"); // Utilisé dans les composants React côté serveur

Paramètres

Le hook accepte deux paramètres :

1. dictionary : Un objet dictionnaire déclaré contenant le contenu localisé pour des clés spécifiques.
2. locale (optionnel) : La locale souhaitée. Par défaut, la locale du contexte actuel est utilisée si elle n'est pas spécifiée.

Dictionnaire

Tous les objets dictionnaires doivent être déclarés dans des fichiers de contenu structurés afin d'assurer la sécurité des types et d'éviter les erreurs d'exécution. Vous pouvez trouver les instructions d'installation ici. Voici un exemple de déclaration de contenu :

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-example",
  content: {
    title: t({
      en: "Client Component Example",
      fr: "Exemple de composant client",
      es: "Ejemplo de componente cliente",
    }),
    content: t({
      en: "This is the content of a client component example",
      fr: "Ceci est le contenu d'un exemple de composant client",
      es: "Este es el contenido de un ejemplo de componente cliente",
    }),
  },
} satisfies Dictionary;

export default componentContent;

{
  "$schema": "https://intlayer.org/schema.json",
  "key": "component-example",
  "content": {
    "title": {
      "nodeType": "translation",
      "translation": {
        "en": "Client Component Example",
        "fr": "Exemple de composant client",
        "es": "Ejemplo de componente cliente"
      }
    },
    "content": {
      "nodeType": "translation",
      "translation": {
        "en": "This is the content of a client component example",
        "fr": "Ceci est le contenu d'un exemple de composant client",
        "es": "Este es el contenido de un ejemplo de componente cliente"
      }
    }
  }
}

Exemple d'utilisation dans React

Voici un exemple de la façon d'utiliser le hook useDictionary dans un composant React :

import type { FC } from "react";
import { useDictionary } from "react-intlayer";
import componentContent from "./component.content";

const ComponentExample: FC = () => {
  const { title, content } = useDictionary(componentContent);

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

Intégration Serveur

Si vous utilisez le hook useDictionary en dehors du IntlayerProvider, la locale doit être explicitement fournie en paramètre lors du rendu du composant :

import type { FC } from "react";
import { useDictionary } from "react-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
  const { content } = useDictionary(clientComponentExampleContent, locale);

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.content}</p>
    </div>
  );
};

Notes sur les attributs

Contrairement aux intégrations utilisant des éditeurs visuels, les attributs comme buttonTitle.value ne s'appliquent pas ici. Accédez directement aux chaînes localisées telles que déclarées dans votre contenu.

<button title={content.title}>{content.content}</button>

Conseils supplémentaires

• Sécurité de type : Utilisez toujours Dictionary pour définir vos dictionnaires afin d'assurer la sécurité de type.
• Mises à jour de la localisation : Lors de la mise à jour du contenu, assurez-vous que toutes les locales sont cohérentes pour éviter les traductions manquantes.

Cette documentation se concentre sur l'intégration du hook useDictionary, offrant une approche simplifiée pour gérer le contenu localisé sans dépendre des fonctionnalités des éditeurs visuels.