作者:
    Aymeric PINEAU
    Creation:2026-01-21Last update:2026-01-21

    react-intlayer 包

    react-intlayer 包为在 React 应用中集成 Intlayer 提供必要的工具。它包含用于处理多语言内容的 context providers、hooks 和组件。

    安装

    bash
    npm install react-intlayer

    导出

    Providers（提供者）

    导入：

    tsx
    import "react-intlayer";
    组件描述相关文档
    IntlayerProvider用于包裹应用并提供 Intlayer 上下文的主 provider。默认包含编辑器支持。IntlayerProvider
    IntlayerProviderContent专注于内容的 provider 组件，不包含编辑器功能。当你不需要可视化编辑器时使用此组件。-
    HTMLProvider用于与 HTML 相关的国际化设置的 Provider。允许覆盖 HTML 标签对应的组件。-

    钩子

    导入：

    tsx
    import "react-intlayer";
    钩子描述相关文档
    useHTMLRenderer用于获取预配置的 HTML 渲染器函数的 Hook。-
    useMarkdownRenderer用于获取预配置的 Markdown 渲染器函数的 Hook。-
    useIntlayer客户端 Hook，按键选择一个字典并返回其内容。如果未提供 locale，则使用来自上下文的 locale。useIntlayer
    useDictionary将字典对象转换并返回当前语言内容的 Hook。处理 t() 翻译、枚举等。useDictionary
    useDictionaryAsync处理异步字典的 Hook。接受基于 Promise 的字典映射并为当前语言解析它。-
    useDictionaryDynamic处理按键加载的动态词典的 Hook。内部使用 React Suspense 处理加载状态。-
    useLocale客户端 Hook，用于获取当前区域设置、默认区域设置、可用区域设置以及更新区域设置的函数。useLocale
    useLocaleBase用于从 context 获取当前 locale 以及所有相关字段 (locale、defaultLocale、availableLocales、setLocale) 的 Hook。-
    usePathname返回移除了区域设置段的当前路径名的 Hook。通过 popstate 对浏览器导航作出反应。usePathname
    useRewriteURL客户端 Hook，用于管理 URL 重写。如果针对当前 pathname 和 locale 存在重写规则，则会更新 URL。useRewriteURL
    useI18n提供翻译函数 t() 的 Hook，用于通过键访问嵌套内容。模仿 i18next/next-intl 的模式。useI18n
    useIntl提供与语言环境绑定的 Intl 对象的 Hook。自动注入当前语言并使用优化的缓存。-
    useLocaleStorage提供在本地存储或 cookies 中持久化 locale 的 Hook。返回 getter 和 setter 函数。-
    useLocaleCookie已弃用。请改用 useLocaleStorage。用于在 cookies 中管理 locale 持久化的 Hook。-
    useLoadDynamic用于使用 React Suspense 加载动态字典的 Hook。接受一个 key 和一个 promise，并缓存结果。-
    useIntlayerContext提供当前 Intlayer 客户端上下文值（locale、setLocale 等）的 Hook。-
    useHTMLContextHook 用于从 HTMLProvider 上下文访问 HTML 组件的 overrides（覆盖）。-

    函数

    导入：

    tsx
    import "react-intlayer";
    函数描述相关文档
    renderHTML用于在组件外部渲染 HTML 的独立实用工具。-
    renderMarkdown用于在组件外部渲染 Markdown 的独立实用工具。-
    t客户端翻译函数，返回所提供多语言内容的翻译。若未提供 locale，则使用上下文中的 locale。翻译
    getDictionary处理字典对象并返回指定 locale 的内容。处理 t() 翻译、枚举、Markdown、HTML 等。-
    getIntlayer从生成的声明中通过其键检索字典并返回其在指定 locale 下的内容。是 getDictionary 的优化版本。-
    setLocaleInStorage在存储中设置 locale（根据配置使用 local storage 或 cookie）。-
    setLocaleCookie已弃用。请改用 setLocaleInStorage。在 cookie 中设置 locale。-
    localeInStorage从存储中获取区域设置（local storage 或 cookie）。-
    localeCookie已弃用。请改用 localeInStorage。从 cookie 中获取区域设置。-

    组件

    导入：

    tsx
    import "react-intlayer";

    或

    tsx
    import "react-intlayer/markdown";
    组件描述相关文档
    HTMLRenderer使用自定义组件渲染 HTML 内容。-
    MarkdownProvider提供用于 markdown 渲染上下文的 Provider。允许为 markdown 元素自定义组件覆盖。-
    MarkdownRenderer使用自定义组件渲染 markdown 内容。支持所有标准 markdown 功能以及 Intlayer 特定语法。MarkdownRenderer

    类型

    导入:

    tsx
    import "react-intlayer";
    类型描述
    IntlayerNode表示 Intlayer 内容树中节点的类型。用于类型安全的内容操作。

    服务器端（react-intlayer/server）

    导入：

    tsx
    import "react-intlayer/server";
    导出类型描述
    IntlayerServerProviderComponent用于服务端渲染的 Provider。
    IntlayerServerComponentIntlayer 内容的服务器端包装器。
    tFunction翻译函数的服务器端版本。
    useLocaleHook用于在服务器端访问区域设置（locale）的 Hook。
    useIntlayerHook服务器端版本的 useIntlayer。
    useDictionaryHook服务器端版本的 useDictionary。
    useI18nHook服务器端版本的 useI18n。
    localeFunction用于在服务器端获取或设置 locale 的函数。
    validatePrefixIntlayerProvider