mcpField
I
intlayer-react

intlayer-react

github.com/aymericzip开发562 次安装6 周前更新
代码仓库

关于 intlayer-react

intlayer-react 是面向 React 项目的 Intlayer 使用技能，介绍如何在组件附近声明多语言内容并通过 Hook 使用。适用于基于 Intlayer 构建本地化组件的开发者。

主要功能

  1. 01在组件旁声明内容字典
  2. 02使用 t() 定义翻译
  3. 03通过 useIntlayer Hook 读取内容
  4. 04涵盖多种 React 应用配置

适用场景

  1. 01为 React 组件添加多语言内容
  2. 02在组件实现中读取已声明的字典
  3. 03参考不同 React 项目环境配置 Intlayer

安装

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

$npx skills add https://github.com/aymericzip/intlayer-skills --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