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.

Ejemplo de uso en React

Demostración del hook useIntlayer dentro de un componente React:

src/app.tsx

Copiar código

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

src/components/ComponentExample.tsx

Copiar código

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

src/components/ServerComponentExample.tsx

Copiar código

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

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.

useI18n

useLocale

Historial de versiones

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

Ejemplo de uso en React

Recursos Adicionales

Integración con React: Documentación del Hook `useIntlayer`