Skip to content

useToggle

Toggle boolean made easy with hooks

Rizki Maulana Citra

Created by / Rizki Maulana Citra

Tired of declaring openModal and closeModal function? I got you!

TS
export default function useToggle(
  initialValue = false
): [boolean, React.Dispatch<React.SetStateAction<boolean>>, () => void, () => void] {
  // s means state while sS means setState
  const [s, sS] = useState(initialValue)

  const enable = useCallback(() => sS(true), [])
  const disable = useCallback(() => sS(false), [])

  return [s, sS, enable, disable]
}

Usage

You can use the hooks like so:

TSX
export default function NutzComponent() {
  // we actually skip the second value
  const [isOpen, , open, close] = useToggle()

  return // your lovely component here
}