useBoolean

useBooleanは、on・off・toggle関数を使用して真偽値を管理するために使用されるカスタムフックです。

state: false

const [flg, { on, off, toggle }] = useBoolean()

return (
  <VStack>
    <Text>state: {String(flg)}</Text>

    <ButtonGroup.Root wrap="wrap">
      <ButtonGroup.Item onClick={on}>On</ButtonGroup.Item>
      <ButtonGroup.Item onClick={off}>Off</ButtonGroup.Item>
      <ButtonGroup.Item onClick={toggle}>Toggle</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { useBoolean } from "@yamada-ui/react"

import { useBoolean } from "@/components/ui"

import { useBoolean } from "@workspaces/ui"

const [flg, { on, off, toggle }] = useBoolean()

初期値を使う

state: false

const [flg, { on, off, toggle }] = useBoolean()

return (
  <VStack>
    <Text>state: {String(flg)}</Text>

    <ButtonGroup.Root wrap="wrap">
      <ButtonGroup.Item onClick={on}>On</ButtonGroup.Item>
      <ButtonGroup.Item onClick={off}>Off</ButtonGroup.Item>
      <ButtonGroup.Item onClick={toggle}>Toggle</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。