React Select にチェックボックスを付ける

こんにちは。地図パズル製作所の都島です。今日は React Select をカスタマイズする方法を書きたいと思います。

React Select について知らない方も多いと思いますが、React Select とは、簡単に複数選択可能なドロップダウンなどの、高度なドロップダウンを作るためのものです。こんな感じのドロップダウンがとても簡単にできます。

こんな感じのソースコードです。

import Select from 'react-select'

const options = [
  {value: 1, label: "北海道"},
  {value: 2, label: "青森県"},
  {value: 3, label: "岩手県"},
  {value: 4, label: "宮城県"},
  {value: 5, label: "秋田県"}
]
function App() {
  return (
    <div style={{width: "500px", margin: "20px"}}>
      <Select options={options} isMulti={true} />
    </div>
  );
}

export default App;

でも、これをもっとカスタマイズしたくなるときがあります。以下の URL にやり方が書いてあります。

https://react-select.com/components

例えば、オプションにチェックボックスを付けてみましょう。

ソースコードはこんな感じです。

import Select, { OptionProps } from 'react-select'

interface Option {
  value: number;
  label: string;
}

const options: Option[] = [
  {value: 1, label: "北海道"},
  {value: 2, label: "青森県"},
  {value: 3, label: "岩手県"},
  {value: 4, label: "宮城県"},
  {value: 5, label: "秋田県"}
]

function MyOption(props: OptionProps<Option>) {
  return <div>
    <input 
      type="checkbox" 
      id={props.data.value.toString()} 
      onChange={(e) => props.selectOption(props.data)} 
      checked={props.isSelected}
    />
    <label htmlFor={props.data.value.toString()}>
      {props.data.label}
    </label>
  </div>
}

function App() {
  return (
    <div style={{width: "500px", margin: "20px"}}>
      <Select 
        options={options} 
        isMulti={true} 
        components={{Option: MyOption}} 
        hideSelectedOptions={false} 
        closeMenuOnSelect={false}
      />
    </div>
  );
}

export default App;

こういうふうに、React Select のコンポーネントの components という props に自分で作ったコンポーネントを設定すればいいみたいですね。React-Select はこんな感じで、簡単にカスタマイズできますので、皆さんも使ってみてください！

最後にいつもの地図パズル製作所の宣伝です！地図パズル製作所は大人も子供も楽しめる無料の地図パズルをたくさん公開しています。ぜひ遊んでみてください！

https://chizu-puzzle.com

参考

https://react-select.com/components