React Custom Hooks Collection

A collection of lightweight, production-ready, and SSR-safe custom React hooks designed to simplify state management, side effects, and DOM interactions in your web applications.

Included Hooks

• useAsync: Handles asynchronous functions (API calls, data fetching) with loading, success, and error states.
• useDebounce: Delays updating a value until a specified time has passed, perfect for live search inputs.
• useEventListener: Safely attaches and cleans up event listeners on elements like window or document.
• useFetch: A robust data-fetching hook with built-in AbortController support to prevent memory leaks.
• useLocalStorage: Syncs React state with browser's localStorage with lazy initialization and error handling.
• useOnClickOutside: Detects clicks outside a specific DOM element (ideal for dropdowns, modals, and menus).
• usePrevious: Tracks and returns the previous value of a state or prop using useRef.
• useSessionStorage: Syncs React state with browser's sessionStorage (clears when the tab closes).
• useToggle: Simple and clean boolean state toggler for UI controls.
• useWindowSize: Tracks current browser window dimensions with debounced performance optimization.

Getting Started

1. Clone the repository: git clone https://github.com/dev-sumitkumardudpuri/react-hooks-collection.git

2. Install dependencies: npm install

3. Example Usage:

import { useToggle } from "./src/hooks/useToggle";

function App() {
  const [isOpen, toggleModal] = useToggle(false);

  return (
    <div>
      <button onClick={toggleModal}>Toggle Modal</button>
      {isOpen && <p>Modal is Open!</p>}
    </div>
  );
}

4. License: This project is open-source and available under the MIT License.