mcpField
I
intlayer-react

intlayer-react

github.com/aymericzip开发86142 次安装今天更新
代码仓库

关于 intlayer-react

用于使用 Intlayer 构建多语言 React 组件的技能。它通过与组件相邻的内容声明文件和 `useIntlayer` Hook，将词典内容接入组件。

主要功能

  1. 01组件级内容声明
  2. 02使用 `t()` 编写翻译词典
  3. 03使用 `useIntlayer` Hook
  4. 04React 环境参考

适用场景

  1. 01为 React 组件添加多语言内容
  2. 02将翻译文件放在组件代码旁
  3. 03将词典内容接入组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aymericzip/intlayer --skill intlayer-react

安装后在 Claude Code 中输入/intlayer-react确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENCE.md
references/
environment_create-react-app.md
environment_lynx-and-react.md
environment_react-native-and-expo.md
environment_tanstack-start.md
environment_vite-and-react_react-router-v7-fs-routes.md
environment_vite-and-react_react-router-v7.md
environment_vite-and-react.md
packages_intlayer_exports.md
packages_react-intlayer_exports.md
packages_react-intlayer_IntlayerProvider.md
packages_react-intlayer_MarkdownRenderer.md
packages_react-intlayer_t.md
packages_react-intlayer_useDictionary.md
packages_react-intlayer_useI18n.md
packages_react-intlayer_useIntlayer.md
packages_react-intlayer_useLocale.md

详细介绍

Intlayer React 用法

核心理念

Intlayer 倡导组件级内容声明。与其使用庞大的全局翻译文件，不如将内容声明在与使用它们的 React 组件相邻的 *.content.ts 文件中。

工作流

要创建翻译后的组件，需要两个文件：

  1. **声明：**内容文件（例如，myComponent.content.ts），用于定义词典。
  2. **实现：**React 组件（例如，MyComponent.tsx），使用 useIntlayer 钩子。
1. 声明内容

使用 t() 创建内容文件以添加翻译。 文件：src/components/MyComponent/myComponent.content.ts

import { t, type Dictionary } from "intlayer";

const content = {
  // The 'key' must be unique and matches what you pass to useIntlayer()
  key: "my-component",
  content: {
    text: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
      // ... All other locales set in intlayer config file
    }),
  },
} satisfies Dictionary;

export default content;

Intlayer React 用法

设置

useIntlayer 钩子

import { useIntlayer } from "react-intlayer";
const MyComponent = () => {
  const content = useIntlayer("my-dictionary-key");
  return (
    <div>
      <h1>
        {/* Return react node */}
        {content.text}
      </h1>
      {/* Return string (.value) */}
      <img src={content.text.value} alt={content.text.value} />
    </div>
  );
};

参考

环境
包

评论

支持 Markdown