Shadcn Hooks

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.

use-toggle.ts
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 useToggle

use-boolean.ts
import { 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