useBoolean

useBoolean is a custom hook used to manage boolean values using on, off, and toggle functions.

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>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

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

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

import { useBoolean } from "@workspaces/ui"

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

Using Initial Values

state: true

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

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>
)

If you use this code, you need to add "use client" to the top of the file.