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 de contenido eficiente.

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 recuperar contenido localizado.
2. locale (opcional): La localización deseada. Por defecto, utiliza la localización del contexto si no se especifica.

Diccionario

Todas las claves del diccionario deben declararse dentro de los 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 uso 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>      <p>{content.description}</p>    </div>  );};

Manejo de Atributos

Al localizar atributos, accede a los valores de 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 centra 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 localizaciones.