useBoolean
A hook to toggle a boolean value
Loading...
Installation
npx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-boolean.json"pnpm dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-boolean.json"yarn dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-boolean.json"bun x shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-boolean.json"Copy and paste the following code into your project.
import { useMemo, useReducer } from 'react'
export interface Actions<T> {
setLeft: () => void
setRight: () => void
set: (value: T) => void
toggle: () => void
}
function useToggle<T = boolean>(): [boolean, Actions<T>]
function useToggle<T>(defaultValue: T): [T, Actions<T>]
function useToggle<T, U>(
defaultValue: T,
reverseValue: U,
): [T | U, Actions<T | U>]
function useToggle<D, R>(
defaultValue: D = false as unknown as D,
reverseValue?: R,
) {
const [state, dispatch] = useReducer(
(
state: D | R,
action:
| { type: 'toggle' }
| { type: 'set'; payload: D | R }
| { type: 'setLeft' }
| { type: 'setRight' },
) => {
const reverseValueOrigin = (
reverseValue === undefined ? !defaultValue : reverseValue
) as D | R
switch (action.type) {
case 'toggle':
return state === defaultValue ? reverseValueOrigin : defaultValue
case 'set':
return action.payload
case 'setLeft':
return defaultValue
case 'setRight':
return reverseValueOrigin
default:
return state
}
},
defaultValue,
)
return [
state,
useMemo(() => {
return {
toggle: () => dispatch({ type: 'toggle' }),
set: (value: D | R) => dispatch({ type: 'set', payload: value }),
setLeft: () => dispatch({ type: 'setLeft' }),
setRight: () => dispatch({ type: 'setRight' }),
}
}, [dispatch]),
]
}
export default useToggleimport { useMemo } from 'react'
import useToggle from '@/registry/hooks/use-toggle'
export function useBoolean(defaultValue: boolean = false) {
const [state, actions] = useToggle(defaultValue)
return [
state,
useMemo(
() => ({
set: (value: boolean) => actions.set(value),
setTrue: () => actions.set(true),
setFalse: () => actions.set(false),
toggle: () => actions.toggle(),
}),
[actions],
),
] as const
}API
/**
* A hook to toggle a boolean value
* @param defaultValue - The default value of the boolean
*/
export function useBoolean(defaultValue?: boolean): readonly [
boolean,
{
/**
* Set the value of the boolean
* @param value - The value to set the boolean to
*/
set: (value: boolean) => void
/**
* Set the value of the boolean to true
*/
setTrue: () => void
/**
* Set the value of the boolean to false
*/
setFalse: () => void
/**
* Toggle the value of the boolean
*/
toggle: () => void
},
]Credits
Last updated on