Creation:2026-01-21Last update:2026-01-21
Reference this doc to your favorite AI assistantChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
This doc is out of date, the base version has been updated on 22 August 2026.
Go to English docVersion History
- "Add usePathname utility"v10.0.023/06/2026
- "Unified documentation for all exports"v7.5.1421/01/2026
The content of this page was translated using an AI.
See the last version of the original content in EnglishEdit this doc
If 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
Copy doc Markdown to clipboard
react-intlayer Package
The react-intlayer package provides the necessary tools to integrate Intlayer into React applications. It includes context providers, hooks, and components for handling multilingual content.
Installation
bash
Copy code
Copy the code to the clipboard
Exports
Providers
Import:
tsx
Copy code
Copy the code to the clipboard
Show all table content
Open the table in a modal to view all data content clearly
| Component | Description | Related documentation |
|---|---|---|
IntlayerProvider | The main provider that wraps your application and provides the Intlayer context. Includes editor support enabled by default. | IntlayerProvider |
IntlayerProviderContent | A provider component focused on content, without the editor features. Use this when you do not require the visual editor. | - |
HTMLProvider | Provider for HTML-related internationalisation settings. Allows component overrides for HTML elements. | - |
Hooks
Import:
tsx
Copy code
Copy the code to the clipboard
Show all table content
Open the table in a modal to view all data content clearly
| Hook | Description | Related Doc |
|---|---|---|
useIntlayer | Client-side hook that selects a dictionary by its key and returns its content. Uses the locale from the context if not provided. | useIntlayer |
useDictionary | Hook that transforms a dictionary object and returns the content for the current locale. Processes t() translations, enumerations, etc. | useDictionary |
useDictionaryAsync | Hook that handles asynchronous dictionaries. Accepts a promise-based dictionary map and resolves it for the current locale. | - |
useDictionaryDynamic | Hook that handles dynamic dictionaries loaded by key. Uses React Suspense internally to manage loading states. | - |
useLocale | Client-side hook to get the current locale, default locale, available locales, and a function to change the locale. | useLocale |
useLocaleBase | Hook to obtain the current locale and all related fields (locale, defaultLocale, availableLocales, setLocale) from context. | - |
usePathname | Hook that returns the current pathname with the locale segment removed. Reactive to browser navigation via popstate. | usePathname |
useRewriteURL | Client-side hook to manage URL rewrites. If a rewrite rule exists for the current pathname and locale, it will update the URL. | useRewriteURL |
useI18n | Hook that provides a translation function t() for accessing nested content by key. Emulates i18next/next-intl pattern. | useI18n |
useIntl | Hook that provides a locale-bound Intl object. Automatically injects the current locale and uses optimised caching. | - |
useLocaleStorage | Hook that provides locale persistence in localStorage or cookies. Returns getter and setter functions. | - |
useLocaleCookie | Deprecated. Use useLocaleStorage instead. Hook that manages locale persistence via cookies. | - |
useLoadDynamic | Hook to load dynamic dictionaries using React Suspense. Accepts a key and a promise; caches the results. | - |
useIntlayerContext | Hook that provides the current Intlayer client context values (locale, setLocale, etc.). | - |
useHTMLContext | Hook to access HTML component overrides from the HTMLProvider context. | - |
Functions
Import:
tsx
Copy code
Copy the code to the clipboard
Show all table content
Open the table in a modal to view all data content clearly
| Function | Description | Related Doc |
|---|---|---|
t | Client-side translation function that returns the translation of the provided multilingual content. Uses the context locale if none is provided. | translation |
getDictionary | Processes dictionary objects and returns the content for the specified locale. Processes t() translations, enumerations, Markdown, HTML, etc. | - |
getIntlayer | Retrieves a dictionary by its key from the generated declaration and returns its content for the specified locale. Optimised version of getDictionary. | - |
setLocaleInStorage | Sets the locale in storage (local storage or cookie, depending on configuration). | - |
setLocaleCookie | Deprecated. Use setLocaleInStorage instead. Sets the locale in a cookie. | - |
localeInStorage | Retrieves the locale from storage (local storage or cookie). | - |
localeCookie | Deprecated. Use localeInStorage instead. Retrieves the locale from a cookie. | - |
Components
Import:
tsx
Copy code
Copy the code to the clipboard
or
tsx
Copy code
Copy the code to the clipboard
Show all table content
Open the table in a modal to view all data content clearly
| Component | Description | Related documentation |
|---|---|---|
MarkdownProvider | Provider for Markdown rendering context. Allows custom component overrides for Markdown elements. | - |
MarkdownRenderer | Renders Markdown content with custom components. Supports all standard Markdown features and Intlayer-specific syntax. | MarkdownRenderer |
Types
Import:
tsx
Copy code
Copy the code to the clipboard
Show all table content
Open the table in a modal to view all data content clearly
| Type | Description |
|---|---|
IntlayerNode | Type representing a node in the Intlayer content tree. Used for type-safe content manipulation. |
Server-side (react-intlayer/server)
Import:
tsx
Copy code
Copy the code to the clipboard
Show all table content
Open the table in a modal to view all data content clearly
| Export | Type | Description |
|---|---|---|
IntlayerServerProvider | Component | Provider for server-side rendering. |
IntlayerServer | Component | Server-side wrapper for Intlayer content. |
t | Function | Server-side version of the translation function. |
useLocale | Hook | Hook to access the locale on the server side. |
useIntlayer | Hook | Server-side version of useIntlayer. |
useDictionary | Hook | Server-side version of useDictionary. |
useI18n | Hook | Server-side version of useI18n. |
locale | Function | Function to get or set the locale on the server. |