react-flags-selectの使い方

はじめに

react-flags-select は、国旗を表示しながら国を選択できるReactコンポーネントです。多言語対応のUIや国の切り替えを伴うアプリで便利に使えます。ここでは、Next.js環境に導入して実際に表示する手順を紹介します。

1. パッケージをインストール

ターミナルで以下のコマンドを実行して、必要なパッケージをインストールします。

1npm install react-flags-select

2. 使用方法（基本）

任意のコンポーネントファイルに以下のようにインポートして使います。

1'use client';
2
3import React, { useState } from 'react';
4import ReactFlagsSelect from 'react-flags-select';
5
6export default function CountrySelector() {
7  const [selected, setSelected] = useState('JP');
8
9  return (
10    <ReactFlagsSelect
11      selected={selected}
12      onSelect={(code) => setSelected(code)}
13      countries={['JP', 'US', 'FR', 'DE', 'CN']}
14      placeholder="国を選択"
15    />
16  );
17}
18

3. 表示例

このコードでは、日本（JP）が初期選択され、ユーザーが国旗をクリックして別の国に切り替えられます。

• selected: 現在選ばれている国コード（ISO 3166-1 alpha-2）
• onSelect: 国が選ばれたときに実行される関数
• countries: 選択肢として表示する国コードのリスト
• placeholder: 何も選ばれていないときの表示

4. カスタマイズ例

カスタムラベルを使いたい場合は customLabels を使います。

1<ReactFlagsSelect
2  selected={selected}
3  onSelect={setSelected}
4  countries={['JP', 'US']}
5  customLabels={{
6    JP: '日本',
7    US: 'アメリカ',
8  }}
9  placeholder="国を選択"
10/>
11

まとめ

• react-flags-select をインストールする
• 必要な国を指定してコンポーネントを表示
• customLabels を使えば日本語表示もできる