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

Import

import { useBoolean } from '@passfort/castle'
content_copy
Copy

Return value

The useBoolean hook returns a stateful boolean value and an object with the following function to update it:

Usage

Usage of toggle method

function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <>
      <Text fontSize="md">Boolean state: {flag.toString()}</Text>
      <Button
        onClick={setFlag.toggle}
        type="primary"
        label="Toggle boolean value"
      />
    </>
  )
}
function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <>
      <Text fontSize="md">Boolean state: {flag.toString()}</Text>
      <Button
        onClick={setFlag.toggle}
        type="primary"
        label="Toggle boolean value"
      />
    </>
  )
}
content_copy
Copy
live example

Usage of on and off methods

function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <Box
      onMouseEnter={setFlag.on}
      onMouseLeave={setFlag.off}
      bg={flag ? 'G25' : 'R25'}
      p={2}
      w="min-content"
      cursor="pointer"
    >
      {flag ? 'The flag is ON!' : 'Hover me to turn ON'}
    </Box>
  )
}
function Example() {
  const [flag, setFlag] = useBoolean()

  return (
    <Box
      onMouseEnter={setFlag.on}
      onMouseLeave={setFlag.off}
      bg={flag ? 'G25' : 'R25'}
      p={2}
      w="min-content"
      cursor="pointer"
    >
      {flag ? 'The flag is ON!' : 'Hover me to turn ON'}
    </Box>
  )
}
content_copy
Copy
live example