intlayer-react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Intlayer React Usage

Intlayer React 使用指南

Core Philosophy

核心理念

Intlayer promotes Component-Level Content Declaration. Instead of a massive global translation file, content is declared in

*.content.ts

files adjacent to the React components that use them.

Intlayer倡导组件级内容声明。无需庞大的全局翻译文件，内容直接在与使用它的React组件相邻的

*.content.ts

文件中定义。

Workflow

操作流程

To create a translated component, you need two files:

Declaration: A content file (e.g.,
```
myComponent.content.ts
```
) defining the dictionary.
Implementation: A React component (e.g.,
```
MyComponent.tsx
```
) using the
```
useIntlayer
```
hook.

要创建一个多语言组件，你需要两个文件：

内容声明：一个内容文件（例如
```
myComponent.content.ts
```
）用于定义多语言字典。
组件实现：一个React组件（例如
```
MyComponent.tsx
```
），使用
```
useIntlayer
```
钩子。

1. Declare Content

1. 定义多语言内容

Create a content file using

t()

for translations. File:

src/components/MyComponent/myComponent.content.ts

typescript

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;

使用

t()

函数创建内容文件。 文件路径：

src/components/MyComponent/myComponent.content.ts

typescript

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

const content = {
  // 'key'必须唯一，且与useIntlayer()中传入的参数一致
  key: "my-component",
  content: {
    text: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
      // ... 所有在intlayer配置文件中设置的语言环境
    }),
  },
} satisfies Dictionary;

export default content;

Intlayer React Usage

Intlayer React 使用指南

Setup

环境搭建

Vite and React
Create React App
React Router v7
React Router v7 (fs routes)
Tanstack Start
React Native and Expo
Lynx and React

Vite与React
Create React App
React Router v7
React Router v7（文件系统路由）
Tanstack Start
React Native与Expo
Lynx与React

useIntlayer Hook

useIntlayer 钩子

tsx

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>
  );
};

tsx

import { useIntlayer } from "react-intlayer";
const MyComponent = () => {
  const content = useIntlayer("my-dictionary-key");
  return (
    <div>
      <h1>
        {/* 返回React节点 */}
        {content.text}
      </h1>
      {/* 返回字符串（.value） */}
      <img src={content.text.value} alt={content.text.value} />
    </div>
  );
};

intlayer-react

Original

Translation

Intlayer React Usage

Intlayer React 使用指南

Core Philosophy

核心理念

Workflow

操作流程

1. Declare Content

1. 定义多语言内容

Intlayer React Usage

Intlayer React 使用指南

Setup

环境搭建

useIntlayer Hook

useIntlayer 钩子

References

参考文档

Environments

环境配置

Packages

相关包