コンポーネント
React 向けのローカライゼーション UI コンポーネントを網羅したコレクションです。本番環境で使える言語スイッチャー、ロケールピッカー、RTL レイアウトをご覧ください。
言語スイッチャー
アプリケーション全体でシームレスにロケールを選択できるように設計された、本格的な言語スイッチャーコンポーネントです。
| コンポーネント | 説明 |
|---|---|
| 言語スイッチャー | 検索、国旗、RTL サポートを備えた高機能なドロップダウン |
| 言語スイッチャー Pill | キーボード操作と RTL サポートに対応した、アニメーション付きのピル型セレクターです |
ロケールピッカー
地域を選択すると、それに対応するロケールのデフォルト値を取得できます。設定ページやオンボーディングの流れに使用できます。
| コンポーネント | 説明 |
|---|---|
| ロケールピッカー | 通貨、日付、数値、週の開始曜日のデフォルト値を地域から導出する、検索付きの地域ピッカー |
Phone Input
国コードセレクターと国番号検索を備えた、国際電話番号の入力コンポーネントです。
| コンポーネント | 説明 |
|---|---|
| Phone Input | 50 か国に対応した、国旗・国番号・検索付きの国セレクター |
ナビゲーション
ローカライゼーションに標準で対応した、高機能なナビゲーションバーです。
| コンポーネント | 説明 |
|---|---|
| NavBar | 言語セレクター、モバイルメニュー、CTA、GitHub リンクを備えたレスポンシブなナビゲーション |
翻訳
原文と訳文を並べて比較・編集できる翻訳ビューです。
| コンポーネント | 説明 |
|---|---|
| 翻訳ウィジェット | 編集可能な訳文パネル、RTL に対応したレイアウト、クレイモーフィズムのスタイル |
技術仕様
主な機能
- TypeScript の完全サポート - IntelliSense による完全な型安全性
- レスポンシブデザイン - ブレークポイントを最適化したモバイルファーストの設計
- アクセシビリティ準拠 - スクリーンリーダー対応を含む WCAG 2.1 AA 基準
- 充実したドキュメント - 使用例、API リファレンス、ベストプラクティス
連携と互換性
- Hooks に対応した React 18 以降
- Next.js 13 以降 の App Router に対応
- shadcn/ui デザインシステムとの連携
- Tailwind CSS によるユーティリティファーストのスタイリング
- npm/pnpm/yarn パッケージマネージャーに対応
リソース
- クイックスタートガイド - インストールと初期設定
- API リファレンス - コンポーネントの props と設定
- コントリビューションガイド - 開発とコントリビュートのガイドライン