REACT

useToggle Hook

A minimal custom React Hook for boolean state toggling with TypeScript support

ReactHooksStateUtilities

Code

import { useState, useCallback } from 'react';

function useToggle(initialValue = false): [boolean, () => void, (value: boolean) => void] {
  const [value, setValue] = useState(initialValue);

  const toggle = useCallback(() => {
    setValue(prev => !prev);
  }, []);

  const setToggle = useCallback((newValue: boolean) => {
    setValue(newValue);
  }, []);

  return [value, toggle, setToggle];
}

// Usage example
// const [isModalOpen, toggleModal, setModalOpen] = useToggle(false);
// <button onClick={toggleModal}>Toggle Modal</button>
// <button onClick={() => setModalOpen(true)}>Open Modal</button>