Skip to content


Toggle boolean made easy with hooks

Rizki Maulana Citra

Created by / Rizki Maulana Citra

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

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]


You can use the hooks like so:

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

  return // your lovely component here
Edit on GitHub