Intlayerの今後のリリースに関する通知を受け取る
    作成:2024-08-11最終更新:2025-06-29

    React統合: useLocale フック ドキュメント

    このセクションでは、Reactアプリケーションでのロケール管理を目的とした react-intlayer ライブラリの useLocale フックについて詳しく説明します。

    Reactでの useLocale のインポート

    useLocale フックを React アプリケーションに統合するには、対応するパッケージからインポートします。

    typescript
    import { useLocale } from "react-intlayer"; // ロケール管理のために React コンポーネントで使用

    概要

    useLocale フックは、React コンポーネント内でロケール設定に簡単にアクセスし操作する方法を提供します。現在のロケール、デフォルトロケール、利用可能なすべてのロケール、およびロケール設定を更新する関数にアクセスできます。

    使用方法

    React コンポーネント内で useLocale フックを使用する方法は以下の通りです:

    src/components/LocaleSwitcher.tsx
    import type { FC } from "react";import { useLocale } from "react-intlayer";const LocaleSwitcher: FC = () => {  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();  return (    <div>      <h1>現在のロケール: {locale}</h1>      <p>デフォルトロケール: {defaultLocale}</p>      <select value={locale} onChange={(e) => setLocale(e.target.value)}>        {availableLocales.map((loc) => (          <option key={loc} value={loc}>            {loc}          </option>        ))}      </select>    </div>  );};export default LocaleSwitcher;

    パラメーターと戻り値

    useLocale フックを呼び出すと、以下のプロパティを含むオブジェクトが返されます:

    • locale: Reactコンテキストで設定されている現在のロケール。
    • defaultLocale: 設定で定義された主要なロケール。
    • availableLocales: 設定で定義された利用可能なすべてのロケールのリスト。
    • setLocale: アプリケーションのコンテキスト内で現在のロケールを更新するための関数。

    この例は、useLocale フックを使用してロケールスイッチャーをレンダリングし、ユーザーがアプリケーションのロケールを動的に変更できるコンポーネントを示しています。

    src/components/LocaleSelector.tsx
    import type { FC } from "react";import { useLocale } from "react-intlayer";const LocaleSelector: FC = () => {  const { locale, setLocale, availableLocales } = useLocale();  const handleLocaleChange = (newLocale) => {    setLocale(newLocale);  };  return (    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>      {availableLocales.map((locale) => (        <option key={locale} value={locale}>          {locale}        </option>      ))}    </select>  );};

    結論

    react-intlayeruseLocale フックは、React アプリケーションでロケールを管理するための重要なツールであり、さまざまな国際的なユーザーに効果的に対応するための機能を提供します。

    ドキュメント履歴

    • 5.5.10 - 2025-06-29: 履歴の初期化
    Intlayerの今後のリリースに関する通知を受け取る