@lingo.dev/react は、Reactアプリを翻訳するための軽量なランタイムライブラリです。JSONCのロケールファイルから翻訳を読み込み、安定したコンテンツハッシュで参照し、ICUのplural / selectに対応した文字列や、リッチなReactツリーをレンダリングできます。数値、日付、リスト、ファイルサイズもロケールに応じてフォーマットされます。
このライブラリ自体に独自のビルドステップはありません。l.text("Hello") を書けば、CLI が lingo extract の際にそれを抽出し、翻訳済みの文字列は同じハッシュを使ってランタイムで取得されます。翻訳が見つからない場合は、フォールバックとして元のテキストが表示されます。
ここで紹介しているのはランタイムです。抽出や翻訳のプッシュを担う @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>;
}よくあるユースケースで必要なのはこれだけです。アプリを一度ラップし、任意のコンポーネントから useLingo() を呼び出せば、Lingo オブジェクトが返ります。そこから .text()、.rich()、複数形、各種フォーマッター、現在のロケールに関するメタデータを利用できます。
このセクションの内容#
クイックスタート
インストールして最初の翻訳を書き、`lingo extract` を実行して、実際に表示されるところまで確認できます。
LingoProvider
コンテキストプロバイダー。マージの仕組み、ネストすべき場面、メッセージの形式を解説します。
useLingo
フック。文字列には `text()`、Reactツリーには `rich()` を使うなど、使い分けを説明します。
複数形とselect
ICUのplural / select形式に対応。MessageFormatにコンパイルされる、使いやすいAPIです。
フォーマット
数値、通貨、パーセント、日付、相対時間、リスト、ファイルサイズまで、すべてネイティブの Intl で扱えます。
