Recibe notificaciones sobre los próximos lanzamientos de Intlayer
    Creación:2024-08-11Última actualización:2025-06-29

    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:

      typescript
      import { useIntlayer } from "react-intlayer"; // Usado en componentes React del lado del cliente
    • Componente Servidor:

    Parámetros

    El hook acepta dos parámetros:

    1. key: La clave del diccionario para obtener contenido localizado.
    2. 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:

    src/app.tsx
    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>    </>  );};
    src/components/ComponentExample.tsx
    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>  );};
    src/components/ServerComponentExample.tsx
    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:

    jsx
    <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
    Recibe notificaciones sobre los próximos lanzamientos de Intlayer