Creation:2026-01-21Last update:2026-08-22
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
Version History
- "Update to Next.js >= 9.4.0 architecture"v9.4.08/22/2026
- "Add usePathname utility"v10.0.06/23/2026
- "Unified documentation for all exports"v7.5.141/21/2026
Edit 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 Doc |
|---|---|---|
IntlayerProvider | The main provider that wraps your application and provides the Intlayer context. Includes editor support by default. | IntlayerProvider |
IntlayerProviderContent | A provider component focused on content without the editor features. Use this when you don't need the visual editor. | - |
HTMLProvider | Provider for HTML-related internationalization settings. Allows component overrides for HTML tags. | - |
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 |
|---|---|---|
useHTMLRenderer | Hook to get a pre-configured HTML renderer function. | - |
useMarkdownRenderer | Hook to get a pre-configured Markdown renderer function. | - |
useIntlayer | Client-side hook that picks one dictionary by its key and returns its content. Uses the locale from 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 for loading states. | - |
useLocale | Client-side hook to get the current locale, default locale, available locales, and a function to update the locale. | useLocale |
useLocaleBase | Hook to get 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. Mimics i18next/next-intl pattern. | useI18n |
useIntl | Hook that provides a locale-bound Intl object. Automatically injects the current locale and uses optimized caching. | - |
useLocaleStorage | Hook that provides locale persistence in local storage or cookies. Returns getter and setter functions. | - |
useLocaleCookie | Deprecated. Use useLocaleStorage instead. Hook that manages locale persistence in cookies. | - |
useLoadDynamic | Hook to load dynamic dictionaries using React Suspense. Accepts a key and promise, caches results. | - |
useIntlayerContext | Hook that provides the current Intlayer client context values (locale, setLocale, etc.). | - |
useHTMLContext | Hook to access HTML component overrides from 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 |
|---|---|---|
renderHTML | Standalone utility for rendering HTML outside of components. | - |
renderMarkdown | Standalone utility for rendering Markdown outside of components. | - |
t | Client-side translation function that returns the translation of the provided multilang content. Uses context locale if not provided. | translation |
getDictionary | Processes dictionary objects and returns 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. Optimized version of getDictionary. | - |
setLocaleInStorage | Sets the locale in storage (local storage or cookie based on configuration). | - |
setLocaleCookie | Deprecated. Use setLocaleInStorage instead. Sets the locale in a cookie. | - |
localeInStorage | Gets the locale from storage (local storage or cookie). | - |
localeCookie | Deprecated. Use localeInStorage instead. Gets the locale from 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 Doc |
|---|---|---|
HTMLRenderer | Renders HTML content with custom components. | - |
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. (Intlayer < 9.4) |
IntlayerServer | Component | Server-side wrapper for Intlayer content. |
t | Function | Server-side version of the translation function. |
useLocale | Hook | Hook to access 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. |