useBoolean

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

Import

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

Copied!

Usage

Editable example

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

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

    <Wrap mt="md" gap="md">
      <Button onClick={on}>On</Button>
      <Button onClick={off}>Off</Button>
      <Button onClick={toggle}>Toggle</Button>
    </Wrap>
  </>
)

Copied!

Using Initial Values

Editable example

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

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

    <Wrap mt="md" gap="md">
      <Button onClick={on}>On</Button>
      <Button onClick={off}>Off</Button>
      <Button onClick={toggle}>Toggle</Button>
    </Wrap>
  </>
)

Copied!

Edit this page on GitHub

PrevioususeAsyncCallback NextuseBreakpoint