Integración de React: Documentación del Hook useIntlayer

Esta sección proporciona orientación detallada sobre el uso del hook useIntlayer dentro de aplicaciones React, permitiendo una localización eficiente del contenido.

Importando useIntlayer en React

El hook useIntlayer se puede integrar en aplicaciones React importándolo según el contexto:

• Componente del Cliente:

  typescript

  import { useIntlayer } from "react-intlayer"; // Usado en componentes de React del lado del cliente

• Componente del Servidor:

Parámetros

El hook acepta dos parámetros:

1. key: La clave del diccionario para recuperar el contenido localizado.
2. locale (opcional): La localidad deseada. Por defecto, se utiliza la localidad del contexto si no se especifica.

Declaración de Contenido

Todas las claves del diccionario deben declararse dentro de archivos de declaración de contenido para mejorar la seguridad de tipos y evitar errores. Puede encontrar las instrucciones de configuración aquí.

Ejemplo de Uso en React

Demostrando el 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 }) => {  // Obtiene el contenido utilizando la clave "homepage"  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 = () => {  // Obtiene el contenido utilizando la clave "component-example"  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => {  // Obtiene el contenido utilizando la clave "server-component"  const content = useIntlayer("server-component");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

Manejo de Atributos

Al localizar atributos, acceda a los valores del contenido adecuadamente:

<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, consulte la documentación del editor visual aquí.

Esta sección se dirige específicamente a la integración del hook useIntlayer en aplicaciones React, simplificando el proceso de localización y asegurando la consistencia del contenido a través de diferentes localidades.