Author:
    Creation:2024-08-11Last update:2025-06-29

    React Integration: useIntlayer Hook Documentation

    This section provides detailed guidance on using the useIntlayer hook within React applications, allowing for efficient content localisation.

    Example Usage in React

    Demonstrating the useIntlayer hook within a React component:

    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>
      <p>{content.description}</p>
    </div>
  );
};

    Additional Resources

    • Intlayer Visual Editor: For a more intuitive content management experience, refer to the visual editor documentation here.

    This section specifically targets the integration of the useIntlayer hook in React applications, simplifying the localisation process and ensuring content consistency across different locales.

    useI18n
    useLocale