react-intlayer: 用于国际化 (i18n) React 应用的 NPM 包

    Intlayer 是一套专为 JavaScript 开发者设计的工具包。它兼容 React、React 和 Express.js 等框架。

    react-intlayer 包 允许您对 React 应用进行国际化。它为 React 国际化提供了上下文提供者和钩子。

    为什么要国际化您的 React 应用？

    国际化您的 React 应用对于有效服务全球受众至关重要。它使您的应用能够以每个用户的首选语言传递内容和消息。这种能力增强了用户体验，并通过使您的应用对不同语言背景的人更具可访问性和相关性，从而扩大了应用的覆盖范围。

    为什么要集成 Intlayer？

    • JavaScript 驱动的内容管理：利用 JavaScript 的灵活性高效地定义和管理您的内容。
    • 类型安全的环境：利用 TypeScript 确保所有内容定义都精确且无错误。
    • 集成的内容文件：将翻译与其相关组件紧密结合，增强可维护性和清晰度。

    安装

    使用您首选的包管理器安装所需的包：

    bash
    npm install react-intlayer

    使用示例

    使用 Intlayer，您可以在代码库中的任何地方以结构化方式声明内容。

    默认情况下，Intlayer 会扫描扩展名为 .content.{ts,tsx,js,jsx,mjs,cjs} 的文件。

    您可以通过在配置文件中设置 contentDir 属性来修改默认扩展名。

    bash
    .├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

    声明您的内容

    react-intlayer 是为 intlayer 包 设计的。intlayer 是一个允许您在代码中的任何地方声明内容的包。它将多语言内容声明转换为结构化字典，无缝集成到您的应用中。

    以下是内容声明的示例：

    tsx
    import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Less than minus one car",      "-1": "Minus one car",      "0": "No cars",      "1": "One car",      ">5": "Some cars",      ">19": "Many cars",    }),  },} satisfies Dictionary;export default component1Content;

    在代码中使用内容

    声明内容后，您可以在代码中使用它。以下是如何在 React 组件中使用内容的示例：

    src/components/Component1Example.tsx
    "use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // 创建相关内容声明  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

    掌握 React 应用的国际化

    Intlayer 提供了许多功能来帮助您国际化您的 React 应用。

    要了解更多关于这些功能的信息，请参考 使用 Intlayer 和 Vite 以及 React 进行 React 国际化 (i18n) 的指南，或 使用 Intlayer 和 React (CRA) 进行 React 国际化 (i18n) 的指南。

    react-intlayer 包提供的功能

    react-intlayer 包还提供了一些功能来帮助您国际化您的应用。

    如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。

    文档的 GitHub 链接
    tt