Integración en React: Documentación del Hook useDictionary

Esta sección proporciona una guía detallada sobre el uso del hook useDictionary en aplicaciones React, permitiendo un manejo eficiente del contenido localizado sin un editor visual.

Importando useDictionary en React

El hook useDictionary puede integrarse en aplicaciones React importándolo según el contexto:

• Componente Cliente:

  import { useDictionary } from "react-intlayer"; // Usado en componentes React del lado cliente

  import { useDictionary } from "react-intlayer"; // Usado en componentes React del lado cliente

  const { useDictionary } = require("react-intlayer"); // Usado en componentes React del lado cliente

• Componente Servidor:

  import { useDictionary } from "react-intlayer/server"; // Usado en componentes React del lado servidor

  import { useDictionary } from "react-intlayer/server"; // Usado en componentes React del lado servidor

  const { useDictionary } = require("react-intlayer/server"); // Usado en componentes React del lado servidor

Parámetros

El hook acepta dos parámetros:

1. dictionary: Un objeto diccionario declarado que contiene contenido localizado para claves específicas.
2. locale (opcional): La configuración regional deseada. Por defecto es la configuración regional del contexto actual si no se especifica.

Diccionario

Todos los objetos diccionario deben ser declarados en archivos de contenido estructurado para garantizar la seguridad de tipos y prevenir errores en runtime. Puedes encontrar las instrucciones de configuración aquí. Aquí tienes un ejemplo de declaración de contenido:

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"
      }
    }
  }
}

Ejemplo de uso en React

A continuación se muestra un ejemplo de cómo usar el hook useDictionary en un componente 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>
  );
};

Integración en el Servidor

Si utilizas el hook useDictionary fuera del IntlayerProvider, el locale debe proporcionarse explícitamente como parámetro al renderizar el componente:

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>
  );
};

Notas sobre los Atributos

A diferencia de las integraciones que usan editores visuales, atributos como buttonTitle.value no se aplican aquí. En su lugar, accede directamente a las cadenas localizadas tal como están declaradas en tu contenido.

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

Consejos Adicionales

• Seguridad de Tipos: Siempre usa Dictionary para definir tus diccionarios y asegurar la seguridad de tipos.
• Actualizaciones de Localización: Al actualizar contenido, asegúrate de que todas las locales sean consistentes para evitar traducciones faltantes.

Esta documentación se centra en la integración del hook useDictionary, proporcionando un enfoque simplificado para gestionar contenido localizado sin depender de funcionalidades de editores visuales.