CountrySelect | ArcBlock

CountrySelectコンポーネントは、国を選択するための使いやすいドロップダウンを提供します。検索可能なリスト、国旗の表示、デスクトップとモバイルの両方のビューポートに適応するレスポンシブデザインが特徴です。react-hook-formで管理されるフォーム内での使用を想定して設計されています。

Props

Prop	Type	説明	必須	デフォルト
`value`	`CountryIso2`	選択された国のISO2コード（例：「us」）。	はい
`onChange`	`(value: CountryIso2) => void`	国が選択されたときに呼び出されるコールバック関数。	はい
`name`	`string`	入力のname属性で、`react-hook-form`との統合に使用されます。	はい
`sx`	`SxProps`	ルート要素に適用されるカスタムスタイル。	いいえ	`{}`
`showDialCode`	`boolean`	`true`の場合、国のダイヤルコードがリストの名前の横に表示されます。	いいえ	`false`

基本的な使用法

CountrySelectコンポーネントを使用するには、react-hook-formのFormProviderでラップする必要があります。コンポーネントの状態はフォームコンテキストを介して管理されます。

Basic CountrySelect Example

import { FormProvider, useForm } from 'react-hook-form';
import { Box, Button, Typography } from '@mui/material';
import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // 必要に応じてパスを調整
import type { CountryIso2 } from 'react-international-phone';

export default function BasicCountrySelect() {
  const methods = useForm<{ country: CountryIso2 }>({
    defaultValues: {
      country: 'us',
    },
  });

  const { handleSubmit, watch, setValue } = methods;
  const countryValue = watch('country'); // 変更を監視して制御されたコンポーネントを更新

  const onSubmit = (data: { country: CountryIso2 }) => {
    alert(`国: ${data.country} でフォームが送信されました`);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
          <Typography variant="h6">国を選択してください</Typography>
          <CountrySelect
            name="country"
            value={countryValue}
            onChange={(newCountry) => {
              setValue('country', newCountry, { shouldValidate: true });
            }}
          />
          <Button type="submit" variant="contained">
            送信
          </Button>
          <Typography>
            現在のフォーム値: {countryValue}
          </Typography>
        </Box>
      </form>
    </FormProvider>
  );
}

機能

検索とフィルタリング

コンポーネントにはドロップダウンリストの上部に検索バーがあり、ユーザーは国名、ISO2コード、またはダイヤルコードで国をすばやく見つけることができます。例えば、「+1」を検索すると、アメリカ合衆国とカナダが表示されます。

レスポンシブUI

デスクトップデバイスでは、CountrySelectは標準のドロップダウンメニューとして表示されます。モバイルデバイスでは、画面下部からスライドアップする全幅のダイアログに変わり、小さなデバイスでも最適化されたユーザーエクスペリエンスを提供します。

キーボードアクセシビリティ

CountrySelectは完全なキーボードナビゲーションをサポートしています。ユーザーはArrowUpキーとArrowDownキーでリストを移動し、Enterキーで国を選択し、Escapeキーでドロップダウンを閉じることができます。TabキーとShift+Tabキーでもリスト項目を順に移動できます。

フォーム統合

react-hook-formとシームレスに連携するように設計されています。選択が行われるとフォームの状態が自動的に更新されるため、FormProviderでラップする必要があります。

高度な使用法

ダイヤルコードの表示

showDialCodeプロパティをtrueに設定すると、リスト内の各国の電話ダイヤルコードを表示できます。

CountrySelect with Dial Code

import { FormProvider, useForm } from 'react-hook-form';
import { Box, Button } from '@mui/material';
import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // 必要に応じてパスを調整
import type { CountryIso2 } from 'react-international-phone';

export default function CountrySelectWithDialCode() {
  const methods = useForm<{ country: CountryIso2 }>({
    defaultValues: {
      country: 'gb',
    },
  });

  const { handleSubmit, watch, setValue } = methods;
  const countryValue = watch('country');

  const onSubmit = (data: { country: CountryIso2 }) => {
    alert(`国: ${data.country} でフォームが送信されました`);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
          <CountrySelect
            name="country"
            value={countryValue}
            onChange={(newCountry) => setValue('country', newCountry)}
            showDialCode={true}
          />
          <Button type="submit" variant="contained">
            送信
          </Button>
        </Box>
      </form>
    </FormProvider>
  );
}

次のステップ

このコンポーネントは、より複雑なフォーム要素の構成要素です。完全な国際電話番号フィールドを作成するために、PhoneInputコンポーネントにどのように統合されているかを参照してください。