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 docThe content of this page was translated using an AI.
See the last version of the original content in EnglishIf 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: 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:
typescriptCopy codeCopy the code to the clipboard
import { useIntlayer } from "react-intlayer"; // Used in client-side React components
Server Component:
Parameters
The hook accepts two parameters:
- key: The dictionary key to retrieve localised content.
- 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:
Copy the code to the clipboard
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> </> );};
Copy the code to the clipboard
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> );};
Copy the code to the clipboard
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:
Copy the code to the clipboard
<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.
Doc History
- 5.5.10 - 2025-06-29: Init history