ローカライゼーション UI コンポーネントReact 向け。
国際化（i18n）向けのオープンソース React コンポーネント。言語スイッチャー、ロケールピッカー、RTL レイアウトを数分で構築できます。MIT ライセンス、コミュニティ主導。
import { LanguageSwitcher } from '@babelize/elements';
export default function App() {
return (
<LanguageSwitcher variant="dropdown=" />
);
}ローカライズに必要なものが、 すべてここに。
モダンな React アプリ向けに作られています。インストールして、世界中にリリースできます。
言語スイッチャー
ドロップダウン、ピル型、国旗表示に対応し、完全な RTL サポートを備えたドロップインスイッチャー。
ロケールピッカー
ネイティブ名と国旗で検索できるロケールピッカー。
RTL レイアウトのサポート
RTL の自動検出とレイアウトの方向処理。
i18n 統合
react-intl、next-intl、i18next、LinguiJS などに対応しています。
"use client";
import { LanguageSwitcher } from "@babelize/elements";
export default function App() {
return (
<LanguageSwitcher
locales={[
{ code: "en" },
{ code: "fr" },
{ code: "es" },
{ code: "de" },
{ code: "ja" },
{ code: "ar" },
]}
defaultValue="en"
onValueChange={(code) => {
// next-intl
router.push(`/${code}`);
// react-i18next
i18n.changeLanguage(code);
}}
/>
);
}よくある質問
React プロジェクトで Babelize Elements を使うために必要な情報をまとめています。お探しの情報が見つからない場合は、GitHub のディスカッションをご覧ください。
`npm install @babelize/elements` でライブラリ全体をインストールするか、`npx shadcn@latest add @babelize/language-switcher`（または `npx @babelize/elements add language-switcher`）で個別のコンポーネントを追加できます。Next.js、Remix、その他すべての React アプリで動作します。
もちろんです。コードはお客様のものなので、すべてのコンポーネントは Tailwind CSS のクラスやプロパティで完全にカスタマイズできます。色、余白、アニメーション、動作を自由に変更できます。デザイン上の制約はありません。
マージされたすべてのコンポーネントは、ドキュメントに掲載される前にメンテナーがレビューし、アクセシビリティ、TypeScript、ローカライゼーションのチェックリストに従っています。世界中の本番アプリで使用されています。
はい。MIT ライセンスで、永続的に無料です。コードは GitHub で公開されており、貢献も歓迎します。商用・非商用を問わず、どのプロジェクトでもコンポーネントを使用できます。帰属表示は必要ありません。
Babelize Elements は、主要なすべての i18n ライブラリ（next-intl、react-i18next、react-intl、LinguiJS、FormatJS など）に対応しています。コンポーネントはライブラリに依存しないため、独自のロケールの状態やコールバックを渡して使用できます。
GitHub で未解決のIssueを確認し、貢献ガイドに沿ってコンポーネントを作成して、pull request を開いてください。メンテナーがレビューしてマージすると、ドキュメントに掲載され、全員が利用できるようになります。