react-hookstack

⚡ React Hookstack

A lightweight and powerful collection of reusable React hooks designed to simplify state management, event handling, and UI logic in your React apps.

🚀 Features

• 🧠 Smart utilities — abstract common React logic into reusable hooks
• 🪶 Lightweight — fast, efficient, and easy to integrate
• ⚙️ TypeScript support — fully typed API
• 🧩 Composable — integrate easily into existing code
• 🔧 Framework agnostic — works with any React setup (Vite, CRA, Next.js, etc.)

📘 Documentation

Comprehensive documentation is available here

👉 Documentation

📘 Storybook

Explore all hooks interactively on Storybook:
👉 Live Demo

📦 Installation

Once published to npm:

npm install react-hookstack
# or
yarn add react-hookstack

If you’re developing locally and want to test it

# Inside react-hookstack/
npm link

# In your target React project:
npm link react-hookstack

🧠 Available Hooks

Hook Name	Description
useArray	Manage array state easily
useAsync	Handle async operations
useBoolean	Manage boolean state
useClickOutside	Detect clicks outside element
useClipboardHistory	Keep track of copied clipboard values
useCookie	Read and write browser cookies
useCopyToClipboard	Copy text to clipboard
useCounter	Simple counter hook
useDarkMode	Detect dark mode preference
useDebounce	Debounce changing values
useDebouncedCallback	Debounced function execution
useDrag	Handle drag events
useEventCallback	Stable event callback function
useEventListener	Attach event listener safely
useFetch	Fetch data with state management
useFocus	Manage element focus
useFormState	Manage form state
useGeoLocation	Get user's geographic location
useHover	Track hover state
useIdle	Detect user inactivity
useIndexedDB	Interact with IndexedDB storage
useInput	Manage input value
useIntersectionObserver	Observe element visibility in viewport
useInterval	Set up recurring interval
useLocalStorage	Sync state with localStorage
useLongPress	Detect long press actions
useMap	Manage Map state
useMergeState	Merge object state updates
useMousePosition	Track mouse cursor position
useOnlineStatus	Detect online/offline status
usePersistedState	Persist state in storage
usePortal	Render element in React portal
usePreferredLanguage	Get user's preferred language
usePrevious	Get previous value
usePreviousDistinct	Get previous distinct value
useRafInterval	Interval synced with requestAnimationFrame
useRafState	State synced with requestAnimationFrame
useReducerWithLogger	Reducer with state change logging
useRequestAnimationFrame	Execute function every animation frame
useSSE	Handle Server-Sent Events
useScrollPosition	Track scroll position
useSessionStorage	Sync state with sessionStorage
useThrottle	Throttle changing values
useThrottledCallback	Throttled function execution
useTimeout	Execute callback after delay
useToggle	Toggle boolean state
useToggleSet	Toggle values in a set
useURLSearchParams	Read and update URL search parameters
useUndoRedo	Undo and redo state changes
useUpdateEffect	Run effect except first render
useVisibilityChange	Detect page visibility changes
useWebSocket	Handle WebSocket connection
useWhyDidYouUpdate	Debug component re-renders
useWindowSize	Track window size

🧩 Example Usage

import React from "react";
import { useToggle } from "react-hookstack";

export const Example = () => {
  const [isOpen, toggle] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>
        {isOpen ? "Hide" : "Show"} Details
      </button>

      {isOpen && <p>Here are the details...</p>}
    </div>
  );
};

Development

git clone https://github.com/Shakir-Afridi/react-handyhooks.git
cd react-handyhooks
npm install

Start development mode

npm run dev

Build for production

npm run build

To test it in another project locally

npm link
# then in your test project:
npm link react-handyhooks

🧾 License

This project is licensed under the MIT License.

💡 Contributing

Contributions are welcome! If you’d like to add new hooks or fix bugs, please open an issue or submit a pull request.

# Fork & clone
git clone https://github.com/Shakir-Afridi/react-handyhooks.git

# Create a feature branch
git checkout -b feature/my-new-hook

# Commit changes
git commit -m "feat: add useXYZ hook"

# Push & open PR
git push origin feature/my-new-hook

👨‍💻 Author

React Hookstack — maintained by passionate open-source developers who believe in clean, reusable React logic

⭐ Support

If you find this library useful, please give it a star ⭐ on GitHub — it helps others discover and support the project!

Keywords

• react
• hooks
• react-hooks
• custom-hooks
• typescript
• state-management
• utility-hooks
• ui-hooks
• performance-hooks
• browser-hooks
• frontend
• react-library

Hooks

• useArray
• useAsync
• useBoolean
• useClickOutside
• useClipboardHistory
• useCookie
• useCopyToClipboard
• useCounter
• useDarkMode
• useDebounce
• useDebouncedCallback
• useDrag
• useEventCallback
• useEventListener
• useFetch
• useFocus
• useFormState
• useGeoLocation
• useHover
• useIdle
• useIndexedDB
• useInput
• useIntersectionObserver
• useInterval
• useLocalStorage
• useLongPress
• useMap
• useMergeState
• useMousePosition
• useOnlineStatus
• usePersistedState
• usePortal
• usePreferredLanguage
• usePrevious
• usePreviousDistinct
• useRafInterval
• useRafState
• useReducerWithLogger
• useRequestAnimationFrame
• useSSE
• useScrollPosition
• useSessionStorage
• useThrottle
• useThrottledCallback
• useTimeout
• useToggle
• useToggleSet
• useURLSearchParams
• useUndoRedo
• useUpdateEffect
• useVisibilityChange
• useWebSocket
• useWhyDidYouUpdate
• useWindowSize