Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
By integrating the Intlayer MCP Server to your favourite AI assistant can retrieve all the doc directly from ChatGPT, DeepSeek, Cursor, VSCode, etc.
See MCP Server docIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
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:
typescriptCopy codeCopy the code to the clipboard
import { useI18n } from "react-intlayer"; // Use in client-side React components
Server Components:
Parameters
This hook accepts two parameters:
- namespace: A dictionary namespace to scope the translation keys.
- 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:
Copy the code to the clipboard
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> </> );};
Copy the code to the clipboard
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> );};
Copy the code to the clipboard
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:
Copy the code to the clipboard
<!-- 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