@lingo.dev/react

@lingo.dev/react 是一个轻量级的 React 应用运行时翻译库。它从 JSONC locale 文件中加载翻译，通过稳定的内容哈希进行查找，并支持借助 ICU plural / select 渲染字符串（或富 React 树），同时提供符合 locale 的数字、日期、列表和文件大小格式化。

这个库本身不需要额外的构建步骤——你只需编写 l.text("Hello")，CLI 会在 lingo extract 期间将其提取出来，并在运行时通过同一个哈希取回对应的译文。如果缺少翻译，就会回退为渲染源文本。

这里介绍的是 runtime。配套工具——用于提取和推送翻译的 @lingo.dev/cli，以及提供 Next.js 绑定的 @lingo.dev/react-next——都在各自独立的包中。

安装#

bash

npm install @lingo.dev/react

一览#

tsx

import { LingoProvider, useLingo } from "@lingo.dev/react";
import esMessages from "./locales/es.json";

export function App() {
  return (
    <LingoProvider locale="es" messages={esMessages}>
      <Greeting name="Ada" />
    </LingoProvider>
  );
}

function Greeting({ name }: { name: string }) {
  const l = useLingo();
  return <p>{l.text("Hello, {name}!", { values: { name }, context: "Hero greeting" })}</p>;
}

常见场景下，API 就这么简单：给应用包一层，在任意组件里调用 useLingo()，这个 hook 就会返回 Lingo 对象，其中包含 .text()、.rich()、复数处理、格式化器，以及当前 locale 的元数据。

本节内容#

快速开始

完成安装，写下第一条翻译，运行 `lingo extract`，看看它如何渲染出来。

LingoProvider

上下文 Provider。了解合并机制、何时需要嵌套，以及 message 应满足什么格式。

useLingo

核心 hook。`text()` 用于字符串，`rich()` 用于 React 树，帮你判断该在什么场景下用哪一个。

复数与 select

ICU plural 和 select 形式——易用的 API，最终会编译为 MessageFormat。

格式化

数字、货币、百分比、日期、相对时间、列表、文件大小——全部基于原生 Intl。

这个页面对你有帮助吗？