chakra-react-select を利用して、アイコン付きのプルダウンリストを作ってみた

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

Chakra UIを利用したUIコンポーネントを作成している時に、アイコン付きのプルダウンリストを作りたくなることはありませんか？私はあります。

そこで、今回はChakra UIを利用したReact Selectのラッパーコンポーネントである chakra-react-select を利用してアイコン付きのプルダウンリストを作る方法を書きたいと思います。

前提条件

Next.jsを利用したプロジェクトにおいて、それぞれ以下のバージョンを利用しています。

• next
  • 13.1.6
• chakra-react-select
  • 3.3.9
• chakra-ui
  • 2.4.9

また、アイコンの表示のために react-icons を利用しています。

アイコン付きのプルダウンリストを作ってみた

ということで、今回はサンプルとして簡単な表示をするだけですが、アイコン付きのプルダウンリストを作ってみました。

アイコンとして、Chrome、Safari、Edgeのアイコンをプルダウンリストの選択オプションに表示させるようにしました。

select-with-icon.tsx

import { HStack, Icon, Text } from '@chakra-ui/react'
import { Select as ReactSelect, Size } from 'chakra-react-select'
import { ReactNode } from 'react'
import { FaChrome, FaEdge, FaQuestionCircle, FaSafari } from 'react-icons/fa'
import { IconType } from 'react-icons/lib'

export type Option = { label: string; value: string }
export type SelectWithIconProps = {
  size: Size
}
export default function SelectWithIcon(props: SelectWithIconProps) {
  const options: Option[] = [
    {
      label: 'Chrome',
      value: 'chrome',
    },
    {
      label: 'Safari',
      value: 'safari',
    },
    {
      label: 'Edge',
      value: 'edge',
    },
  ]

  const formatOptionLabel = (option: Option): ReactNode => {
    let iconType: IconType = FaQuestionCircle
    switch (option.value) {
      case 'chrome':
        iconType = FaChrome
        break
      case 'safari':
        iconType = FaSafari
        break
      case 'edge':
        iconType = FaEdge
        break
      default:
        break
    }

    return (
      <HStack>
        <Icon as={iconType} />
        <Text as={'span'}>{option.label}</Text>
      </HStack>
    )
  }

  return (
    <ReactSelect
      {...props}
      placeholder={'選択してください...'}
      options={options}
      formatOptionLabel={formatOptionLabel}
    />
  )
}

実際の画面表示は以下のようになります。

formatOptionLabel

ここが今回の一番のポイントでした。この formatOptionLabel を利用することで、プルダウンリストの中身を自由にカスタマイズすることができます。

今回は単純にアイコンと文字列を表示していますが、もっと複雑なカスタマイズもできそうです。

まとめ

以上、chakra-react-select を利用して、アイコン付きのプルダウンリストを作ってみました。

通常のChakra UIのSelctではカスタマイズが難しいですが、chakra-react-select を利用すればうまくカスタマイズができますね。

どなたかのお役に立てば幸いです。それでは！

参考