Creation:2026-01-21Last update:2026-01-21

    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

    npm install react-intlayer

    Exports

    Providers

    Import:

    import "react-intlayer";
    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:

    import "react-intlayer";
    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. -
    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:

    import "react-intlayer";
    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:

    import "react-intlayer";

    or

    import "react-intlayer/markdown";
    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:

    import "react-intlayer";
    Type Description
    IntlayerNode Type representing a node in the Intlayer content tree. Used for type-safe content manipulation.

    Server-side (react-intlayer/server)

    Import:

    import "react-intlayer/server";
    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 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.
    Why Intlayer ?