Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección
Al integrar el servidor MCP Intlayer a tu asistente de IA, puedes recuperar todos los documentos directamente desde ChatGPT, DeepSeek, Cursor, VSCode, etc.
Ver la documentación del servidor MCPEl contenido de esta página ha sido traducido con una IA.
Ver la última versión del contenido original en inglésSi tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.
Enlace de GitHub a la documentaciónCopiar el Markdown del documento a la portapapeles
Integración en React: Documentación del Hook useI18n
Esta sección proporciona una guía detallada sobre cómo usar el hook useI18n dentro de aplicaciones React, permitiendo una localización eficiente del contenido.
Importando useI18n en React
El hook useI18n puede ser importado e integrado en aplicaciones React según el contexto de la siguiente manera:
Componentes Cliente:
typescriptCopiar códigoCopiar el código al portapapeles
import { useI18n } from "react-intlayer"; // Usar en componentes React del lado del cliente
Componentes Servidor:
Parámetros
Este hook acepta dos parámetros:
- namespace: Un espacio de nombres del diccionario para delimitar las claves de traducción.
- locale (opcional): La configuración regional deseada. Si no se especifica, se usará la configuración regional del contexto por defecto.
Diccionario
Todas las claves del diccionario deben declararse dentro de archivos de declaración de contenido para mejorar la seguridad de tipos y prevenir errores. Las instrucciones de configuración se pueden encontrar aquí.
Ejemplos de uso en React
Ejemplos de uso del hook useI18n dentro de componentes React:
Copiar el código al portapapeles
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> </> );};
Copiar el código al portapapeles
import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => { const t = useI18n("component-example"); return ( <div> <h1>{t("title")}</h1> {/* Mostrar el título */} <p>{t("description")}</p> {/* Mostrar la descripción */} </div> );};
Copiar el código al portapapeles
import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => { const t = useI18n("server-component"); return ( <div> <h1>{t("title")}</h1> {/* Mostrar el título */} <p>{t("description")}</p> {/* Mostrar la descripción */} </div> );};
Manejo de Atributos
Al localizar atributos, accede a los valores de traducción de manera adecuada:
Copiar el código al portapapeles
<!-- Para atributos de accesibilidad (por ejemplo, aria-label), usa .value ya que se requieren cadenas puras --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
Recursos Adicionales
- Editor Visual de Intlayer: Para una experiencia de gestión de contenido más intuitiva, consulta la documentación del editor visual aquí.
Esta sección cubre específicamente la integración del hook useI18n en aplicaciones React, simplificando el proceso de localización y asegurando la consistencia del contenido a través de diferentes locales.
Historial de la Documentación
- 6.0.0 - 2025-06-29: Escritura inicial de la documentación del hook useI18n