Reactアプリで国旗選択を簡単に実装する方法：react-flags-selectの使い方

# npmを使用する場合
$ npm install react-flags-select --save

# yarnを使用する場合
$ yarn add react-flags-select

実装方法

• インポート

  まず、react-flags-selectをインポートします。

  import ReactFlagsSelect from 'react-flags-select';

• 基本的な使い方

  import { useState } from 'react';
  import ReactFlagsSelect from 'react-flags-select';
  
  export default function FlagSelect() {
    const [selected, setSelected] = useState("");
  
    return (
      <div>
        <ReactFlagsSelect 
          selected={selected}
          onSelect={(code) => setSelected(code)}
          countries={["US", "GB", "JP", "FR", "DE"]}
          placeholder="国を選択してください"
        />
        <p>選択された国コード: {selected}</p>
      </div>
    );
  }
  

さらにカスタマイズしてみよう！

react-flags-selectは多くのカスタマイズオプションを提供しています。

この例では、countriesプロパティを使用して、United States、Great Britain、Japan、France、Germanyだけを選択肢として表示し、選択された国のコードを表示するプログラムを作成します。

import ReactFlagsSelect from "react-flags-select";
import { useState } from "react";
import "../styles/flagStyle.css";

export default function ReactFlags() {
  const [selected, setSelected] = useState("");

  return (
    <div className="container">
      <h2>Flags</h2>
      <ReactFlagsSelect
        selected={selected}
        onSelect={(code) => setSelected(code)}
        countries={["US", "GB", "JP", "FR", "DE"]}
        customLabels={{
          US: "United States",
          GB: "Great Britain",
          JP: "Japan",
          FR: "France",
          DE: "Germany",
        }}
        showSelectedLabel={true}
        showSecondarySelectedLabel={true}
        selectedSize={16}
        showOptionLabel={true}
        showSecondaryOptionLabel={true}
        optionsSize={16}
        placeholder={""}
        searchable={true}
        searchPlaceholder={"Search for a country"}
        alignOptionsToRight={false}
        fullWidth={true}
        disabled={false}
      />
      <p>選択された国: {selected}</p>
    </div>
  );
}

css

/* flagStyle.css */
.container{
    margin-left: 50px;
}
.ReactFlagsSelect-module_selectOptionValue__vS99- {
    padding: 5px 15px;
}
.ReactFlagsSelect-module_flagsSelect__2pfa2{
    width: 30%;
}

デモ結果

• 未選択状態

デフォルトの国が指定されていない場合、プレースホルダーのみが表示されます。

• 選択時

countries={…}に指定された国の国旗とラベルが表示されます。

• 選択後

選択された国のコードが表示されます。

次は選択された国のコードとラベルが表示するプログラムの例です。

この例では、countriesが指定していないので、全ての国が表示されます。

import ReactFlagsSelect from "react-flags-select";
import { useState } from "react";
import countries from "i18n-iso-countries";
import "../styles/flagStyle.css";

export default function ReactFlags() {
  const [selected, setSelected] = useState({ code: "JP", name: "Japan" });
  countries.registerLocale(require("i18n-iso-countries/langs/en.json"));

  const handleSelect = (code: string) => {
    const countryName = countries.getName(code, "en") || code;
    setSelected({ code, name: countryName });
  };

  return (
    <div className="container">
      <h2>Flags</h2>
      <ReactFlagsSelect
        selected={selected.code}
        onSelect={handleSelect}
        customLabels={{
          US: "United States of America",
        }}
        showSelectedLabel={true}
        showSecondarySelectedLabel={true}
        selectedSize={16}
        showOptionLabel={true}
        showSecondaryOptionLabel={true}
        optionsSize={16}
        placeholder={""}
        searchable={true}
        searchPlaceholder={"Search for a country"}
        alignOptionsToRight={false}
        fullWidth={true}
        disabled={false}
      />
      <p>
        選択された国: {selected.name} ({selected.code})
      </p>
    </div>
  );
}

※CSSは前の例で使用したflagStyle.cssを再利用してください。

デモ結果

• 未選択状態

デフォルトの国が表示されます。

• 選択時

指定した国の国旗とラベルが表示されます。

• 検索時

検索したキーワードと一致する国旗とラベルが表示されます。

• 選択後

選択された国のコードとラベルが表示されます。

react-flags-selectを使えば、国旗と国名を簡単に選択できる機能を実装できます。

また、このコンポーネントは、言語選択などの多言語対応機能を実装する際にも活用できるでしょう。

国際化が求められるアプリケーションにおいて非常に役立つだけでなく、カスタマイズ性も高いため、プロジェクトの要件に合わせて柔軟に利用できます。