useBoolean

React hook for managing boolean state with convenient helper methods for setting true, false, and toggling. Perfect for React applications requiring clean boolean state management with Next.js integration and TypeScript support.

Loading component...

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-boolean.json

npx shadcn@latest add https://www.shadcn.io/registry/use-boolean.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-boolean.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-boolean.json

Features

Boolean state management with useState under the hood and validation
Convenient helpers including setTrue, setFalse, and toggle methods
Memoized callbacks using useCallback for optimal performance
Type safety with comprehensive TypeScript definitions and error handling
Default value support with boolean validation and error throwing
Memory efficient with proper callback memoization to prevent unnecessary re-renders

Examples

Advanced Interface Controls

Loading component...

"use client";import * as React from "react";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { Switch } from "@/components/ui/switch";import { useBoolean } from "@/components/ui/shadcn-io/use-boolean";export default function UseBooleanAdvancedDemo() {  const { value: isVisible, toggle: toggleVisible } = useBoolean(true);  const { value: isEnabled, setTrue: enable, setFalse: disable } = useBoolean(false);  const { value: isLoading, setTrue: startLoading, setFalse: stopLoading } = useBoolean(false);  const { value: isExpanded, toggle: toggleExpanded } = useBoolean(false);  const simulateAction = async () => {    startLoading();    await new Promise(resolve => setTimeout(resolve, 1500));    stopLoading();    enable();  };  return (    <div className="space-y-4 p-4 max-w-sm mx-auto">      {/* Visibility Toggle */}      <div className="space-y-2">        <div className="flex items-center justify-between">          <Label className="text-sm font-medium">Show Content</Label>          <Switch checked={isVisible} onCheckedChange={toggleVisible} />        </div>                {isVisible && (          <div className="bg-muted rounded p-3 transition-all">            <p className="text-sm">✨ This content is conditionally rendered!</p>          </div>        )}      </div>      {/* Enable/Disable State */}      <div className="space-y-2">        <div className="flex items-center justify-between">          <Label className="text-sm font-medium">Feature Status</Label>          <Badge variant={isEnabled ? "default" : "secondary"} className="text-xs">            {isEnabled ? "Enabled" : "Disabled"}          </Badge>        </div>                <div className="flex gap-2">          <Button             size="sm"             onClick={enable}             disabled={isEnabled}            className="text-xs"          >            Enable          </Button>          <Button             size="sm"             variant="outline"             onClick={disable}             disabled={!isEnabled}            className="text-xs"          >            Disable          </Button>        </div>      </div>      {/* Loading State */}      <div className="space-y-2">        <Label className="text-sm font-medium">Async Action</Label>        <Button           onClick={simulateAction}          disabled={isLoading}          className="w-full text-sm"        >          {isLoading && (            <div className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />          )}          {isLoading ? "Processing..." : "Start Process"}        </Button>      </div>      {/* Expandable Content */}      <div className="space-y-2">        <Button           variant="ghost"           onClick={toggleExpanded}          className="w-full justify-between text-sm p-2"        >          Details          <span className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`}>            ▼          </span>        </Button>                {isExpanded && (          <div className="bg-muted rounded p-3 space-y-1 text-xs">            <p>• Visibility: {isVisible ? "ON" : "OFF"}</p>            <p>• Feature: {isEnabled ? "ENABLED" : "DISABLED"}</p>            <p>• Loading: {isLoading ? "ACTIVE" : "IDLE"}</p>            <p>• Expanded: {isExpanded ? "OPEN" : "CLOSED"}</p>          </div>        )}      </div>      <div className="text-xs text-muted-foreground text-center pt-2">        Multiple useBoolean instances managing different UI states      </div>    </div>  );}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Demonstrates multiple boolean states working together in a realistic interface with dark mode, modals, and loading states.

Use Cases

This free open source React hook works well for:

Modal dialogs - Show/hide modal states with convenient open/close methods
Toggle switches - Dark mode, settings, and feature toggles built with Next.js
Loading states - Start/stop loading indicators using TypeScript patterns
Visibility controls - Show/hide components with clean boolean management
Form validation - Track validation states and error conditions
UI interactions - Hover states, dropdown menus, and accordion panels

API Reference

Parameter	Type	Default	Description
`defaultValue`	`boolean`	`false`	Initial boolean value. Must be a valid boolean or throws error

Return Object

Property	Type	Description
`value`	`boolean`	Current boolean state value
`setValue`	`React.Dispatch<React.SetStateAction<boolean>>`	Direct state setter (same as useState)
`setTrue`	`() => void`	Memoized function to set state to true
`setFalse`	`() => void`	Memoized function to set state to false
`toggle`	`() => void`	Memoized function to toggle the current state

Usage Patterns

Basic Usage

const { value, setTrue, setFalse, toggle } = useBoolean(false);

// Set to true
setTrue();

// Set to false
setFalse();

// Toggle current value
toggle();

With Initial Value

const { value, toggle } = useBoolean(true); // starts as true

const { value: isOpen, setTrue: openModal, setFalse: closeModal } = useBoolean();

return (
  <>
    <button onClick={openModal}>Open Modal</button>
    {isOpen && <Modal onClose={closeModal} />}
  </>
);

Implementation Notes

Hook validates that defaultValue is a boolean and throws descriptive error if not
All helper functions (setTrue, setFalse, toggle) are memoized with useCallback
Callback memoization prevents unnecessary re-renders in child components
Compatible with React 16.8+ and follows hooks rules and conventions
Works seamlessly with TypeScript for full type safety and IntelliSense
Helper methods have stable references across re-renders for performance
Error handling provides clear feedback for invalid default values

useBoolean

Reactbutton

Reactbadge

Reactlabel

Reactswitch

On this page