React Integration: useIntlayer Hook Documentation

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

Importing useIntlayer in React

The useIntlayer hook can be integrated into React applications by importing it based on the context:

• Client Component:

  typescript

  Copy content

  Copy code

  Copy the code to the clipboard

  import { useIntlayer } from "react-intlayer"; // Used in client-side React components

• Server Component:

Parameters

The hook accepts two parameters:

1. key: The dictionary key to retrieve localised content.
2. locale (optional): The desired locale. Defaults to the context's locale if not specified.

Dictionary

All dictionary keys must be declared within content declaration files to enhance type safety and avoid errors. You can find the setup instructions here.

Example Usage in React

Demonstrating the useIntlayer hook within a React component:

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

Handling Attributes

When localising attributes, access the content values appropriately:

<button title={content.buttonTitle.value}>{content.buttonText}</button>

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.