useToggle
A hook to toggle a value
Installation
npx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-toggle.json"pnpm dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-toggle.json"yarn dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-toggle.json"bun x shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-toggle.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 useToggleAPI
/**
* A hook to toggle a value
* @param defaultValue - The default value of the value
* @param reverseValue - The reverse value of the value
* @returns The value and the actions to toggle the value
*/
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>]Credits
Last updated on