Chakra UIでチェックを入れたCheckboxの一覧をシンプルに取得する

2022.12.06

この記事は最終更新から2年以上経過しているため、内容が古くなっている可能性があります。

Reactでチェックを入れたCheckboxの一覧を取得する方法を調べてみたのですが、実装がごちゃごちゃのサンプルコードばかりで参考になりませんでした。

現在開発しているプロジェクトでは自分が最も好きなCSSフレームワークのChakra UIを取り入れていて、Chakra UIはカスタムフックもいくつか提供しているので、今回使えそうなカスタムフックが無いか探してみたところuseCheckboxGroupというものを見つけたので実装方法をご紹介します。

公式ドキュメントはこちら

実装方法
余談

実装方法

import { Flex, Text, Stack, Checkbox, useCheckboxGroup } from "@chakra-ui/react"

const App = () => {
  const manufacturers = ["Honda", "Yamaha", "Kawasaki", "Suzuki"]
  const { getCheckboxProps, value: checkedItems } = useCheckboxGroup()

  return (
    <Flex minH="100vh" alignItems="center" justifyContent="center" flexDirection="column">
      <Stack spacing={5} direction="row">
        {manufacturers.map((manufacturer, idx) => {
          return <Checkbox key={idx} {...getCheckboxProps({ value: manufacturer })}>{manufacturer}</Checkbox>
        })}
      </Stack>
      <Text>Checked: {JSON.stringify(checkedItems)}</Text>
    </Flex>
  )
}

export default App

このようなソースを書いてみました。これを表示すると