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

  Copiar contenido

  Copiar código

  Copiar 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:

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:

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

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

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:

<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.