Component UI
useTogglestate

useToggle

NewSSR SAFE

Toggles a boolean state value with memoized handlers.

$ pnpm dlx shadcn@latest add @byphongphan/use-toggle
Requires @byphongphan in components.json
state
Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-toggle
Requires @byphongphan in components.json

Usage

import { useToggle } from "@/shared/hooks"
export function Modal() {  const [isOpen, toggle, { setTrue, setFalse }] = useToggle(false)
  return (    <div>      <button onClick={() => toggle()}>Toggle</button>      <button onClick={setTrue}>Open Modal</button>      <button onClick={setFalse}>Close Modal</button>      {isOpen && <div>Modal Content</div>}    </div>  )}

Props & Parameters

ParamTypeDefaultDescription
initialValuebooleanfalseInitial boolean state value.

Returns

ReturnTypeDescription
[value, toggle, actions][boolean, (next?: boolean) => void, UseToggleActions]Tuple containing state, toggle callback, and memoized action helpers (setTrue, setFalse, setValue).

Command Palette

Quick search and commands navigation