Intégration React : Documentation du Hook useDictionary

Cette section fournit des conseils détaillés sur l'utilisation du hook useDictionary dans les applications React, permettant un traitement 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'importing en fonction du contexte :

• Composant Client :

  typescript

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

• Composant Serveur :

  typescript

  import { useDictionary } from "next-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 du contenu localisé pour des clés spécifiques.
2. locale (optionnel) : La locale souhaitée. Par défaut, elle prend la locale du contexte actuel si elle n'est pas spécifiée.

Déclaration de Contenu

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

import { t, type DeclarationContent } from "intlayer";const exampleContent = {  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 DeclarationContent;export default exampleContent;

Exemple d'Utilisation dans un Composant Client React

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

"use client";import type { FC } from "react";import { useDictionary } from "next-intlayer";import clientComponentExampleContent from "./component.content";const ClientComponentExample: FC = () => {  const { title, content } = useDictionary(clientComponentExampleContent);  return (    <div>      <h1>{title}</h1>      <p>{content}</p>    </div>  );};

Exemple d'Utilisation dans un Composant Serveur React

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

import type { FC } from "react";import { useDictionary } from "next-intlayer/server";import clientComponentExampleContent from "./component.content";const ServerComponentExample: FC = () => {  const { content } = useDictionary(clientComponentExampleContent);  return (    <div>      <h1>{content.title}</h1>      <p>{content.content}</p>    </div>  );};

Remarques sur les Attributs

Contrairement aux intégrations utilisant des éditeurs visuels, les attributs comme buttonTitle.value ne s'appliquent pas ici. Au lieu de cela, 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é des Types : Utilisez toujours DeclarationContent pour définir vos dictionnaires afin de garantir la sécurité des types.
• Mises à Jour de 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, fournissant une approche rationalisée pour gérer le contenu localisé sans s'appuyer sur les fonctionnalités des éditeurs visuels.