Receive notifications about upcoming Intlayer releases
    Creation:2025-08-23Last update:2025-08-23

    React Integration: useI18n Hook Documentation

    This section provides detailed guidance on how to use the useI18n hook within React applications, enabling efficient content localization.

    Importing useI18n in React

    The useI18n hook can be imported and integrated into React applications according to the context as follows:

    • Client Components:

      typescript
      import { useI18n } from "react-intlayer"; // Use in client-side React components
    • Server Components:

    Parameters

    This hook accepts two parameters:

    1. namespace: A dictionary namespace to scope the translation keys.
    2. locale (optional): The desired locale. If not specified, the context's locale will be used as default.

    Dictionary

    All dictionary keys must be declared within content declaration files to enhance type safety and prevent errors. Configuration instructions can be found here.

    Usage Examples in React

    Examples of using the useI18n hook within React components:

    src/App.tsx
    import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};
    src/components/ComponentExample.tsx
    import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* Display the title */}      <p>{t("description")}</p> {/* Display the description */}    </div>  );};
    src/components/ServerComponentExample.tsx
    import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* Display the title */}      <p>{t("description")}</p> {/* Display the description */}    </div>  );};

    Attribute Handling

    When localizing attributes, access the translation values appropriately:

    jsx
    <!-- For accessibility attributes (e.g., aria-label), use .value since pure strings are required --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

    Additional Resources

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

    This section specifically covers the integration of the useI18n hook in React applications, simplifying the localization process and ensuring content consistency across different locales.

    Documentation History

    • 6.0.0 - 2025-06-29: Initial writing of useI18n hook documentation
    Receive notifications about upcoming Intlayer releases
    useI18n Hook Documentation | react-intlayer | Intlayer