useBoolean

Buttons 8

About

Manage a boolean state with the useBoolean hook, providing methods to set it to true, false, or toggle between them.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds useBoolean to your project and fits it to your theme.

Code

How useBoolean is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'

import { useBoolean } from "@/components/hooks/use-boolean"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

export function UseBooleanDemo() {
  const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false)

  return (
    <Card className="p-6 max-w-md mx-auto">
      <div className="space-y-6">
        <div className="flex items-center gap-2">
          <div className="text-sm font-medium">Current state:</div>
          <code className={`px-2 py-1 rounded-md ${
            value 
              ? 'bg-green-500/10 text-green-700 dark:text-green-400' 
              : 'bg-red-500/10 text-red-700 dark:text-red-400'
          }`}>
            {value.toString()}
          </code>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <Button 
            variant={value ? "default" : "outline"} 
            onClick={setTrue}
            className="w-full"
          >
            Set True
          </Button>
          
          <Button 
            variant={!value ? "default" : "outline"}
            onClick={setFalse}
            className="w-full"
          >
            Set False
          </Button>

          <Button 
            variant="secondary"
            onClick={toggle}
            className="w-full col-span-2"
          >
            Toggle Value
          </Button>

          <Button 
            variant="secondary"
            onClick={() => setValue(prev => !prev)}
            className="w-full col-span-2"
          >
            Custom Toggle (using setValue)
          </Button>
        </div>

        <div className="text-sm text-muted-foreground">
          <p>This demo shows all the methods provided by useBoolean:</p>
          <ul className="list-disc list-inside mt-2 space-y-1">
            <li><code>value</code>: current boolean state</li>
            <li><code>setTrue()</code>: set to true</li>
            <li><code>setFalse()</code>: set to false</li>
            <li><code>toggle()</code>: toggle current value</li>
            <li><code>setValue()</code>: standard setState function</li>
          </ul>
        </div>
      </div>
    </Card>
  )
}