k8s/Kubernetes-rooks-PROSAGA-码农传奇

Why Rooks ?

GitHub release (latest by date)
GitHub
Codecov branch

npm
npm bundle size

node-lts

Collection of awesome react hooks

📚 Table of Contents

Quick Start
Why Rooks?
Popular Hooks
All Hooks by Category
Features
Installation
Usage
Contributors
License

🚀 Quick Start

Get up and running in seconds:

npm install rooks
# or
yarn add rooks
# or
pnpm add rooks

Import any hook and start using it:

import { useDidMount, useCounter, useToggle } from "rooks";
function App() {
  const { value, increment, decrement } = useCounter(0);
  const [isOn, toggleIsOn] = useToggle(false);
  useDidMount(() => {
    console.log("Component mounted! 🎉");
  });
  return (
    <div>
      <h1>Count: {value}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <h2>Toggle is {isOn ? "ON" : "OFF"}</h2>
      <button onClick={toggleIsOn}>Toggle</button>
    </div>
  );
}

📖 Browse all hooks • 🎮 Try in CodeSandbox

✨ Why Rooks?

🎯	Focused Each hook does one thing well	📦	Tree-shakeable Import only what you need
🔄	SSR Ready Works with Next.js, Remix, Gatsby	🧪	Well Tested 95%+ code coverage
📚	Documented Every hook has examples & demos	⚡	TypeScript First Full type safety out of the box
🎨	Modern Built for React 18+ with ESM	🤝	Community Driven 82 contributors and growing

🌟 Popular Hooks

State Management

useCounter _{Counter with increment/decrement}	useToggle _{Toggle between values}	useLocalstorageState _{useState with localStorage sync}
`const { value, increment }` `= useCounter(0)`	`const [on, toggle]` `= useToggle()`	`const [user, setUser]` `= useLocalstorageState(‘user’)`

Event Handling

useKey

_{Keyboard event handling}

useOutsideClick

_{Detect clicks outside element}

useOnClickRef

_{Click handler with ref}

Lifecycle & Effects

useDidMount

_{componentDidMount equivalent}

useWillUnmount

_{componentWillUnmount equivalent}

useDebounce

_{Debounce any value}

List of all hooks

🎬 Animation & Timing - 9 hooks

useAnimation - Animation hook for React useIntervalWhen - Sets an interval immediately when a condition is true
useLockBodyScroll - This hook locks the scroll of the body element when isLocked is set to true. usePrefersReducedMotion - A React hook that returns true if the user has enabled the ‘prefers-reduced-motion’ setting in their system.
useRaf - A continuously running requestAnimationFrame hook for React useResizeObserverRef - Resize Observer hook for React.
useSpring - Spring animation hook for React useTimeoutWhen - Takes a callback and fires it when a condition is true
* useTween - Tween animation hook for React

🌐 Browser APIs - 16 hooks

useBroadcastChannel - A React hook that provides a clean interface to the Broadcast Channel API for cross-tab/window communication useClipboard - Clipboard read/write operations hook for React
useGeolocation - A hook to provide the geolocation info on client side. useIdleDetectionApi - Hook to detect when user is idle using Idle Detection API with polyfill
useMediaRecorder - Audio/video recording from MediaStream useNetworkInformation - Network connection quality detection hook for React
useNavigatorLanguage - Navigator Language hook for React. useNotification - Browser notifications with permission handling
useOnline - Online status hook for React. useOrientation - orientation hook for react
useScreenDetailsApi - Hook for multi-screen information and management using Screen Details API useWebLocksApi - Hook for coordinating operations across tabs/workers with Web Locks API
useShare - Web Share API for native sharing useSpeech - Speech synthesis hook for React
useFetch - Hook for fetching data from URLs with loading states, error handling, and automatic JSON parsing useVibrate - Vibration API hook for React

🛠️ Development & Debugging - 1 hook

* useRenderCount - Get the render count of a component

🚀 Events - 16 hooks

useDocumentEventListener - A react hook to an event listener to the document object useDocumentVisibilityState - Returns the visibility state of the document.
useFocus - Handles focus events for the immediate target element. useFocusWithin - Handles focus events for the target component.
useIsDroppingFiles - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas. useOnClickRef - Callback on click/tap events
useOnHoverRef - On hover callback hook useOnLongHover - Fires a callback when an element is hovered for a while
useOnLongPress - Fire a callback on long press useOnStartTyping - Fires a callback when the user starts typing outside editable fields (input, textarea, contenteditable). Supports filtering for a-z and 0-9 keys.
useOnWindowResize - A React hook for adding an event listener for window resize useOnWindowScroll - A React hook for adding an event listener for window scroll
useOutsideClick - Outside click(for a ref) event as hook for React. useOutsideClickRef - A hook that can track a click event outside a ref. Returns a callbackRef.
usePageLeave - Page leave detection with callbacks for beforeunload and visibility change useWindowEventListener - Adds an event listener to window

📝 Form & File Handling - 3 hooks

useCheckboxInputState - Simple checkbox state management hook that provides a boolean state and props that can be spread directly onto a checkbox input element useFileDropRef - Drop files easily
* useFormState - Comprehensive form state management with validation

⌨️ Keyboard & Input - 5 hooks

useInput - Input hook for React. useKey - keypress, keyup and keydown event handlers as hooks for react.
useKeyBindings - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press. useKeyRef - Very similar useKey but it returns a ref
* useKeys - A hook which allows to setup callbacks when a combination of keys are pressed at the same time.

🔥 Lifecycle & Effects - 11 hooks

useAsyncEffect - A version of useEffect that accepts an async function useDebouncedAsyncEffect - A version of useEffect that accepts an async function and debounces its execution based on dependency changes
useDebouncedEffect - A version of useEffect that debounces the effect execution based on dependency changes useDeepCompareEffect - Deep compare dependencies instead of shallow for useEffect
useDidMount - componentDidMount hook for React useDidUpdate - componentDidUpdate hook for react
useDocumentTitle - A hook to easily update document title with React useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
useIsomorphicEffect - A hook that resolves to useEffect on the server and useLayoutEffect on the client. useLifecycleLogger - A react hook that console logs parameters as component transitions through lifecycles.
* useWillUnmount - componentWillUnmount lifecycle as hook for React.

🖱️ Mouse & Touch - 3 hooks

useMouse - Mouse position hook for React. useMouseMoveDelta - Tracks delta of mouse move
* useMouseWheelDelta - Tracks delta of mouse move

⚡ Performance & Optimization - 5 hooks

useDebounce - Debounce hook for react useDebouncedValue - Tracks another value and gets updated in a debounced way.
useDebounceFn - Powerful debounce function hook for React useThrottle - Throttle custom hook for React
* useWebWorker - Web Worker management with message passing

❇️ State - 18 hooks

useArrayState - Array state manager hook for React useCountdown - Count down to a target timestamp and call callbacks every second (or provided peried)
useCounter - Counter hook for React. useGetIsMounted - Checks if a component is mounted or not at the time. Useful for async effects
useLocalstorageState - UseState but auto updates values to localStorage useMapState - A react hook to manage state in a key value pair map.
useMultiSelectableList - A custom hook to easily select multiple values from a list useNativeMapState - Manage Map() object state in React
usePreviousDifferent - usePreviousDifferent returns the last different value of a variable usePreviousImmediate - usePreviousImmediate returns the previous value of a variable even if it was the same or different
usePromise - Promise management hook for react useQueueState - A React hook that manages state in the form of a queue
useSafeSetState - set state but ignores if component has already unmounted useSelect - Select values from a list easily. List selection hook for react.
useSelectableList - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc. useSessionstorageState - useState but syncs with sessionstorage
useSetState - Manage the state of a Set in React. useStackState - A React hook that manages state in the form of a stack

🔄 State History & Time Travel - 4 hooks

useTimeTravelState - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook. useToggle - Toggle (between booleans or custom data)hook for React.
useUndoRedoState - Setstate but can also undo and redo useUndoState - Drop in replacement for useState hook but with undo functionality.

⚛️ UI - 14 hooks

useAudio - Audio hook useBoundingclientrect - getBoundingClientRect hook for React.
useBoundingclientrectRef - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked. useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
useFullscreen - Use full screen api for making beautiful and emersive experinces. useMeasure - Measures both inner and outer dimensions of any DOM element in a performant way and updates when dimensions change
useIntersectionObserverRef - A hook to register an intersection observer listener. useInViewRef - Simple hook that monitors element enters or leave the viewport that’s using Intersection Observer API.
useMediaMatch - Signal whether or not a media query is currently matched. useMutationObserver - Mutation Observer hook for React.
useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef. usePictureInPictureApi - Hook for managing Picture-in-Picture video functionality
usePreferredColorScheme - Color scheme preference detection (dark/light mode) useVideo - Video hook for react

🔧 Utilities & Refs - 7 hooks

useEventListenerRef - A react hook to add an event listener to a ref useForkRef - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
useFreshCallback - Avoid stale closures and keep your callback fresh useFreshRef - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
useFreshTick - Like use-fresh-ref but specifically for functions useMergeRefs - Merges any number of refs into a single ref
* useRefElement - Helps bridge gap between callback ref and state

📱 Window & Viewport - 2 hooks

useWindowScrollPosition - A React hook to get the scroll position of the window useWindowSize - Window size hook for React.

🧪 Experimental Hooks - 5 hooks

useSuspenseNavigatorBattery - Suspense-enabled hook for getting battery status information from Navigator Battery API useSuspenseNavigatorUserAgentData - Suspense-enabled hook for getting high entropy values from Navigator User Agent Data API
useSuspenseLocalStorageState - Suspense-enabled hook for localStorage state management with cross-tab synchronization useSuspenseSessionStorageState - Suspense-enabled hook for sessionStorage state management with proper serialization
* useSuspenseIndexedDBState - Suspense-enabled hook for IndexedDB state management with structured data storage and cross-tab synchronization

⚠️ Experimental hooks may be removed or significantly changed in any release without notice. Use with caution in production.

Features

✅ Collection of 119 hooks as standalone modules.

✅ Standalone package with all the hooks at one place

✅ Built for ESM

Installation

npm i -s rooks

Import any hook from “rooks” and start using them!

import { useDidMount } from "rooks";

Usage

function App() {
  useDidMount(() => {
    alert("mounted");
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Standalone Package

Package containing all the hooks is over here. - Docs and Npm Install

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

View all 82 contributors

_{Bhargav Ponnapalli} 💻 🚧	_{anil kumar chaudhary} 💻	_{Qiwei Yang} 💻 🚧	_{maciek_grzybek} 💻	_{Harsh Zalavadiya} 💻	_{B V K MAHIJENDRA} 💻	_{Braxton Christensen} 💻
_Hansel 💻	_{Harshil Parmar} 💻	_Lionel 💻	_{Max Stoiber} 💻	_{Michael Moore} 💻	_{Rajas Paranjpe} 💻	_{Mahendra Choudhary} 💻
_{Nghia Pham} 💻	_{Akshay Kadam (A2K)} 💻	_{Alex Golubtsov} 💻	_Arman 💻	_{Branden Visser} 💻	_{Brian Steere} 💻	_{Cal Courtney} 💻
_{Chris Milson} 💻	_{Cong Zhang} 💻	_{Daniel Holmes} 💻	_{Fernando Beck} 💻	_{Josh Davenport} 💻	_MARCEL 💻	_{Neilor Caldeira} 💻
_{Tobias Lins} 💻	_Tsvetan 💻	_{Wei Zhu} 💻	_{Yakko Majuri} 💻	_{Frank Hellwig} 💻	_{Austin Peterson} 💻	_thodubois 💻
_{wes christiansen} 💻	_{CJ Patoilo} 💻	_mar1u50 💻	_{Ayushman Gupta} 💻	_{Rafael Ferreira} 💻	_{Kristinn Thor Johannsson} 💻	_{Michael Moore} 💻
_{Trevor Blades} 💻	_{official_dulin} 💻	_{Billy Mosis Priambodo} 💻	_{Stafford Williams} 💻	_{Chanhee Kim} 💻	_Hooriza 💻	_{Nils Wittler} 💻
_{Sebastian Szczepański} 💻	_{Mahendra Choudhary} 💻	_{Som Shekhar Mukherjee} 💻	_{Qiushi Pan} 💻	_{Jishnu Viswanath} 💻	_brahambence 💻	_{dependabot[bot]} 💻
_{renovate[bot]} 💻	_{dependabot-preview[bot]} 💻	_{github-actions[bot]} 💻	_{allcontributors[bot]} 💻	_zhangenming 💻	_{Antoni Kiszka} 💻	_{Greg Poole} 💻
_mergify[bot] 💻	_{Chaitanya J} 💻	_{G H Mahimaanvita} 💻	_{Danilo Woznica} 💻	_dan-klasson 💻	_{Sébastien Vanvelthem} 💻	_{Aleksandr Soldatov} 💻
_{Eli Yukelzon} 💻	_{Mahendra Choudhary} 💻	_{Chaitanya J} 💻	_{Dominik Dorfmeister} 💻	_Nghiệp 💻	_{Seongmin Park} 💻	_{Nate Higgins} 💻
_{Michael Moore} 💻	_{Moritz Brandes} 💻	_{Som Shekhar Mukherjee} 💻	_cursor[bot] 💻	_JulianWielga 💻

Other hooks libraries

These are some libraries that I constantly take inspiration and ideas from