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 con React: Documentación del Hook useIntlayer
Esta sección proporciona una guía detallada sobre cómo usar el hook useIntlayer dentro de aplicaciones React, permitiendo una localización eficiente del contenido.
Importando useIntlayer en React
El hook useIntlayer puede integrarse en aplicaciones React importándolo según el contexto:
Componente Cliente:
typescriptCopiar códigoCopiar el código al portapapeles
import { useIntlayer } from "react-intlayer"; // Usado en componentes React del lado del cliente
Componente Servidor:
Parámetros
El hook acepta dos parámetros:
- key: La clave del diccionario para obtener contenido localizado.
- locale (opcional): La configuración regional deseada. Por defecto, usa la configuración regional del contexto si no se especifica.
Diccionario
Todas las claves del diccionario deben declararse dentro de archivos de declaración de contenido para mejorar la seguridad de tipos y evitar errores. Puedes encontrar las instrucciones de configuración aquí.
Ejemplo de uso en React
Demostración del hook useIntlayer dentro de un componente React:
Copiar el código al portapapeles
import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => { const content = useIntlayer("homepage", locale); return ( <> <p>{content.introduction}</p> <IntlayerProvider locale={locale}> <ClientComponentExample /> </IntlayerProvider> <IntlayerServerProvider locale={locale}> <ServerComponentExample /> </IntlayerServerProvider> </> );};
Copiar el código al portapapeles
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ComponentExample: FC = () => { const content = useIntlayer("component-example"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
Copiar el código al portapapeles
import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => { const content = useIntlayer("server-component"); return ( <div> <h1>{content.title}</h1> {/* Título del componente del servidor */} <p>{content.description}</p>{" "} {/* Descripción del componente del servidor */} </div> );};
Manejo de Atributos
Al localizar atributos, accede a los valores del contenido de manera adecuada:
Copiar el código al portapapeles
<button title={content.buttonTitle.value}>{content.buttonText}</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 se enfoca específicamente en la integración del hook useIntlayer en aplicaciones React, simplificando el proceso de localización y asegurando la consistencia del contenido en diferentes locales.
Historial del Documento
- 5.5.10 - 2025-06-29: Historial inicial