Shadcn Hooks

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.

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

API

/**
 * 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