🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
@supunlakmal/hooks
Advanced tools
@supunlakmal/hooks - npm Package Compare versions
+1
-1
| { | ||
| "name": "@supunlakmal/hooks", | ||
| "version": "1.0.5", | ||
| "version": "1.2.0", | ||
| "description": "A collection of reusable React hooks", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
+418
-292
@@ -91,383 +91,383 @@ # @supunlakmal/hooks | ||
| ### [**`useAnimationFrame`**](https://github.com/supunlakmal/hooks/blob/main/docs/useAnimationFrame.md) | ||
| Okay, here is a list of all the hooks found in the provided documentation, formatted as requested: | ||
| Executes a callback function on each frame of the `requestAnimationFrame` loop. | ||
| --- | ||
| --- | ||
| ### [**`useBatteryStatus`**](https://github.com/supunlakmal/hooks/blob/main/docs/useBatteryStatus.md) | ||
| ### [**`useVisibility`**](https://github.com/supunlakmal/hooks/blob/main/docs/useVisibility.md) | ||
| Provides real-time information about the device's battery status. | ||
| Tracks whether a target element is currently visible within the browser viewport or a specified scrollable ancestor element. | ||
| --- | ||
| ### [**`useBoolean`**](https://github.com/supunlakmal/hooks/blob/main/docs/useBoolean.md) | ||
| ### [**`useWebSocket`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWebSocket.md) | ||
| Manages a boolean state with convenient toggle, setTrue, and setFalse functions. | ||
| React hook for managing WebSocket connections. | ||
| --- | ||
| ### [**`useCachedFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCachedFetch.md) | ||
| ### [**`useWakeLock`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWakeLock.md) | ||
| A `useFetch` variant with simple in-memory caching and TTL. | ||
| Provides a simple way to utilize the Screen Wake Lock API within your React application. | ||
| --- | ||
| ### [**`useClickOutsideWithEscape`**](https://github.com/supunlakmal/hooks/blob/main/docs/useClickOutsideWithEscape.md) | ||
| ### [**`useWhyDidYouUpdate`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWhyDidYouUpdate.md) | ||
| Triggers a callback when clicking outside an element or pressing the Escape key. | ||
| A simple hook that helps debug component re-renders by logging the props that changed since the last render. | ||
| --- | ||
| ### [**`useClipboardWithFeedback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useClipboardWithFeedback.md) | ||
| ### [**`useWebWorker`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWebWorker.md) | ||
| Copies text to the clipboard and shows timed feedback on success. | ||
| Simplifies running functions in a separate Web Worker thread. | ||
| --- | ||
| ### [**`useConst`**](https://github.com/supunlakmal/hooks/blob/main/docs/useConst.md) | ||
| ### [**`useWorker`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWorker.md) | ||
| Initializes and returns a value that remains constant throughout the component's lifecycle. | ||
| Allows you to offload expensive computations or functions to a separate Web Worker thread. | ||
| --- | ||
| ### [**`useCookie`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCookie.md) | ||
| ### [**`useWindowSize`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWindowSize.md) | ||
| Provides an interface for reading, writing, and deleting cookies. | ||
| Returns the current dimensions (width and height) of the browser window. | ||
| --- | ||
| ### [**`useCountdown`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCountdown.md) | ||
| ### [**`useResizeObserver`**](https://github.com/supunlakmal/hooks/blob/main/docs/useResizeObserver.md) | ||
| Manages a countdown timer with start, pause, and reset controls. | ||
| Monitors changes to the dimensions (content rect and border box) of a target DOM element using the `ResizeObserver` API. | ||
| --- | ||
| ### [**`useCounter`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCounter.md) | ||
| ### [**`useRovingTabIndex`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRovingTabIndex.md) | ||
| A basic counter hook with increment, decrement, and reset functions. | ||
| Implements the roving tabindex accessibility pattern, enabling keyboard navigation within a group of focusable elements contained within a specified element. | ||
| --- | ||
| ### [**`useConditionalEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useConditionalEffect.md) | ||
| ### [**`useResetState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useResetState.md) | ||
| A `useEffect` variant that allows you to conditionally run the effect based on a boolean flag. | ||
| Provides a state variable and a function to reset it to its initial value. | ||
| --- | ||
| ### [**`useContextMenu`**](https://github.com/supunlakmal/hooks/blob/main/docs/useContextMenu.md) | ||
| ### [**`useScript`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScript.md) | ||
| Provides state and logic for implementing a custom context menu (right-click menu). | ||
| Dynamically loads an external JavaScript script and tracks its loading status. | ||
| --- | ||
| ### [**`useCopyToClipboard`**](https://github.bal/hooks/blob/main/docs/useCopyToClipboard.md) | ||
| ### [**`useScreenOrientation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScreenOrientation.md) | ||
| Provides a function to copy text to the clipboard and tracks status (uses fallback). | ||
| Tracks the screen's orientation type and angle using the Screen Orientation API. | ||
| --- | ||
| ### [**`useControlledRerenderState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useControlledRerenderState.md) | ||
| ### [**`useScrollLock`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollLock.md) | ||
| A hook to force a component to re-render. | ||
| Provides functions to prevent and allow scrolling on the `<body>` element of the page. | ||
| --- | ||
| ### [**`useCycle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCycle.md) | ||
| ### [**`useScrollPosition`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollPosition.md) | ||
| Cycles through a list of values with next/previous controls. | ||
| Tracks the current X and Y scroll position of the browser window or a specified scrollable element. | ||
| --- | ||
| ### [**`useDarkMode`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDarkMode.md) | ||
| ### [**`useScrollSpy`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollSpy.md) | ||
| Manages application theme preference (dark/light mode) with OS detection and local storage persistence. | ||
| Monitors the scroll position of a container (or the window) and determines which target section element is currently considered "active". | ||
| --- | ||
| ### [**`useDebouncedCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedCallback.md) | ||
| ### [**`useSessionStorage`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSessionStorage.md) | ||
| Debounces a callback function, delaying its execution until a certain time has passed without changes. | ||
| Behaves like `useState` but persists the state in the browser's `sessionStorage`. | ||
| --- | ||
| ### [**`useDebouncedEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedEffect.md) | ||
| ### [**`useRouteChange`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRouteChange.md) | ||
| A `useEffect` variant that debounces the effect callback. | ||
| Executes a callback function whenever the browser's URL path changes. | ||
| --- | ||
| ### [**`useDebouncedFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedFetch.md) | ||
| ### [**`useSet`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSet.md) | ||
| A `useFetch` variant that debounces the fetch call. | ||
| Manages state in the form of a JavaScript `Set` object, providing utility functions for common set operations. | ||
| --- | ||
| ### [**`useDebouncedGeolocation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedGeolocation.md) | ||
| ### [**`useSetState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSetState.md) | ||
| Tracks the user's geographic location using the Geolocation API, with debouncing. | ||
| Provides a way to manage state in a component using an object, similar to the `setState` method in class components. | ||
| --- | ||
| ### [**`useDebouncedMediaQuery`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedMediaQuery.md) | ||
| ### [**`useSpeechSynthesis`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSpeechSynthesis.md) | ||
| Debounces the result of a CSS media query. | ||
| Leverages the browser's Speech Synthesis API (Text-to-Speech). | ||
| --- | ||
| ### [**`useDebouncedWindowSize`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedWindowSize.md) | ||
| ### [**`useStateWithHistory`**](https://github.com/supunlakmal/hooks/blob/main/docs/useStateWithHistory.md) | ||
| Provides window dimensions debounced by a specified delay. | ||
| Manages state similarly to `useState`, but additionally keeps track of the state's history. | ||
| --- | ||
| ### [**`useDefault`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDefault.md) | ||
| ### [**`useStepper`**](https://github.com/supunlakmal/hooks/blob/main/docs/useStepper.md) | ||
| Provides a default value if the input value is `null` or `undefined`. | ||
| Manages the state and navigation logic for multi-step processes. | ||
| --- | ||
| ### [**`useDerivedState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDerivedState.md) | ||
| ### [**`useStorageValue`**](https://github.com/supunlakmal/hooks/blob/main/docs/useStorageValue.md) | ||
| Computes derived state based on other values, recomputing only when dependencies change (wraps `useMemo`). | ||
| Provides a convenient way to manage state that is persisted in either `localStorage` or `sessionStorage`. | ||
| --- | ||
| ### [**`useDeviceMotion`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDeviceMotion.md) | ||
| ### [**`useSwipe`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSwipe.md) | ||
| Tracks device motion information (acceleration, rotation rate) via the `devicemotion` event. | ||
| Detects swipe gestures (left, right, up, down) on touch-enabled devices for a specified element. | ||
| --- | ||
| ### [**`useDeviceOrientation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDeviceOrientation.md) | ||
| ### [**`useSyncedLocalStorage`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSyncedLocalStorage.md) | ||
| Tracks the physical orientation of the device via the `deviceorientation` event. | ||
| Provides a state management mechanism similar to `useState`, but with persistence in `localStorage` and synchronization across tabs. | ||
| --- | ||
| ### [**`useDocumentTitle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDocumentTitle.md) | ||
| ### [**`useSyncedRef`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSyncedRef.md) | ||
| Sets and manages the document title. | ||
| Provides a way to create a ref that automatically stays in sync with a given value. | ||
| --- | ||
| ### [**`useDraggable`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDraggable.md) | ||
| ### [**`useTextSelection`**](https://github.com/supunlakmal/hooks/blob/main/docs/useTextSelection.md) | ||
| Adds direct element draggability (positioning via transform) using pointer events, with bounds support. | ||
| Tracks the text currently selected by the user within the document and provides details about the selection. | ||
| --- | ||
| ### [**`useDrag`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDrag.md) | ||
| ### [**`useThrottle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottle.md) | ||
| Provides basic HTML Drag and Drop API event handling (`dragstart`, `drag`, `dragend`) for an element. | ||
| Throttles a value, ensuring that updates to the value do not occur more frequently than a specified time limit. | ||
| --- | ||
| ### [**`useElementSize`**](https://github.com/supunlakmal/hooks/blob/main/docs/useElementSize.md) | ||
| ### [**`useThrottledEventListener`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledEventListener.md) | ||
| Efficiently tracks the dimensions (width/height) of a DOM element using `ResizeObserver`. | ||
| Allows you to attach an event listener to an element and throttle the execution of the event handler. | ||
| --- | ||
| ### [**`useEnum`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEnum.md) | ||
| ### [**`useThrottledCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledCallback.md) | ||
| A hook to manage a state that cycles through values of an enum. (Description inferred - doc file was blank). | ||
| Creates a debounced version of a callback function, limiting the rate at which it can be executed. | ||
| --- | ||
| ### [**`useErrorBoundary`**](https://github.com/supunlakmal/hooks/blob/main/docs/useErrorBoundary.md) | ||
| ### [**`useThrottledScroll`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledScroll.md) | ||
| A hook to add error boundary to a component. | ||
| Tracks the window's horizontal (`scrollX`) and vertical (`scrollY`) scroll position, but throttles the state updates. | ||
| --- | ||
| ### [**`useEventCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEventCallback.md) | ||
| ### [**`useThrottledState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledState.md) | ||
| Creates a stable function reference that always calls the latest version of a callback. | ||
| Provides a way to throttle state updates, limiting the rate at which the state is updated based on input. | ||
| --- | ||
| ### [**`useEventListener`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEventListener.md) | ||
| ### [**`useTimeout`**](https://github.com/supunlakmal/hooks/blob/main/docs/useTimeout.md) | ||
| Robustly attaches event listeners to `window`, `document`, or elements, handling cleanup. | ||
| A declarative hook for setting timeouts (`setTimeout`) in React components. | ||
| --- | ||
| ### [**`useEventSource`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEventSource.md) | ||
| ### [**`useScrollToTop`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollToTop.md) | ||
| Manages a connection to a Server-Sent Events (SSE) endpoint. | ||
| Returns a function to programmatically scroll the window to the top of the page. | ||
| --- | ||
| ### [**`useEyeDropper`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEyeDropper.md) | ||
| ### [**`useToggle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useToggle.md) | ||
| Utilizes the EyeDropper API to select colors from the screen. | ||
| Provides a simple way to manage boolean state with toggle functionality. | ||
| --- | ||
| ### [**`useFavicon`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFavicon.md) | ||
| ### [**`useNetworkSpeed`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkSpeed.md) | ||
| Dynamically sets the website's favicon. | ||
| Provides information about the user's current network connection, such as effective speed and type. | ||
| --- | ||
| ### [**`useFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFetch.md) | ||
| ### [**`useNetworkState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkState.md) | ||
| A simple hook for fetching data, managing loading and error states. | ||
| Provides information about the user's network connectivity status. | ||
| --- | ||
| ### [**`useFiniteStateMachine`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFiniteStateMachine.md) | ||
| ### [**`useNotification`****](https://github.com/supunlakmal/hooks/blob/main/docs/useNotification.md) | ||
| Manages complex component state using an explicit state machine definition. | ||
| Provides an interface to interact with the browser's Web Notifications API. | ||
| --- | ||
| ### [**`useFirstMountState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFirstMountState.md) | ||
| ### [**`useOnlineStatus`**](https://github.com/supunlakmal/hooks/blob/main/docs/useOnlineStatus.md) | ||
| Returns `true` if the component is rendering for the first time, `false` otherwise. | ||
| Tracks the browser's online/offline connection status. | ||
| --- | ||
| ### [**`useFocusTrap`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFocusTrap.md) | ||
| ### [**`useOrientation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useOrientation.md) | ||
| Traps keyboard focus within a specified container element when active (for modals, dialogs). | ||
| Tracks the device's screen orientation using the Screen Orientation API. | ||
| --- | ||
| ### [**`useFocusWithinState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFocusWithinState.md) | ||
| ### [**`usePageLeave`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePageLeave.md) | ||
| Determines if a specified element or any of its descendants currently have focus. | ||
| Triggers a callback function when the user's mouse cursor leaves the main browser window or document area. | ||
| --- | ||
| ### [**`useForm`**](https://github.com/supunlakmal/hooks/blob/main/docs/useForm.md) | ||
| ### [**`usePageVisibility`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePageVisibility.md) | ||
| A basic hook for managing form state, input changes, and submission. | ||
| Tracks the visibility state of the current browser tab/page using the Page Visibility API. | ||
| --- | ||
| ### [**`useFormValidation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFormValidation.md) | ||
| ### [**`usePagination`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePagination.md) | ||
| A comprehensive hook for form state, validation (change/blur/submit), and submission handling. | ||
| Manages pagination logic for client-side data sets. | ||
| --- | ||
| ### [**`useForceUpdate`**](https://github.com/supunlakmal/hooks/blob/main/docs/useForceUpdate.md) | ||
| ### [**`usePatch`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePatch.md) | ||
| A hook to force a component to re-render. | ||
| A specialized version of `useFetch` for making PATCH requests. | ||
| --- | ||
| ### [**`useFullscreen`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFullscreen.md) | ||
| ### [**`usePersistentCounter`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePersistentCounter.md) | ||
| Enters and exits fullscreen mode for an element, tracking the current state. | ||
| Provides a counter state which automatically persists its value in the browser's local storage. | ||
| --- | ||
| ### [**`useFunctionalState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFunctionalState.md) | ||
| ### [**`usePersistentToggle`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePersistentToggle.md) | ||
| Functional state updates for React components. (Description inferred - doc file was blank). | ||
| Manages a boolean state that automatically persists its value in the browser's local storage. | ||
| --- | ||
| ### [**`useGeolocation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useGeolocation.md) | ||
| ### [**`usePermission`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePermission.md) | ||
| Tracks the user's geographic location using the Geolocation API. | ||
| Queries the status of browser permissions using the Permissions API. | ||
| --- | ||
| ### [**`useGeolocationContinuous`**](https://github.com/supunlakmal/hooks/blob/main/docs/useGeolocationContinuous.md) | ||
| ### [**`usePinchZoom`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePinchZoom.md) | ||
| Tracks the user's geographic location continuously using the Geolocation API. | ||
| Allows you to detect and react to pinch-to-zoom gestures on a specified HTML element. | ||
| --- | ||
| ### [**`useHasBeenVisible`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHasBeenVisible.md) | ||
| ### [**`usePortal`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePortal.md) | ||
| Determines if an element has ever been visible within the viewport. | ||
| Simplifies the creation and management of React Portals. | ||
| --- | ||
| ### [**`useHistoryState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHistoryState.md) | ||
| ### [**`usePost`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePost.md) | ||
| Manages state with undo/redo history tracking. | ||
| A specialized version of `useFetch` for making POST requests. | ||
| --- | ||
| ### [**`useHookableRef`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHookableRef.md) | ||
| ### [**`usePrefersReducedMotion`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePrefersReducedMotion.md) | ||
| Create a ref that can be used in a hook. (Description inferred - doc file was blank). | ||
| Detects whether the user has requested the system minimize the amount of non-essential motion it uses. | ||
| --- | ||
| ### [**`useHover`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHover.md) | ||
| ### [**`usePreferredLanguages`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePreferredLanguages.md) | ||
| Tracks whether the mouse pointer is currently hovering over a specific DOM element. | ||
| Returns an array of the user's preferred languages, as configured in their browser. | ||
| --- | ||
| ### [**`useHoverDelay`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHoverDelay.md) | ||
| ### [**`usePreviousDifferent`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePreviousDifferent.md) | ||
| Tracks hover state with a minimum duration delay. | ||
| Tracks the previous _different_ value of a state variable. | ||
| --- | ||
| ### [**`useIdleCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleCallback.md) | ||
| ### [**`usePromise`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePromise.md) | ||
| Schedules a function to be called during browser idle periods using `requestIdleCallback`. | ||
| Provides a way to manage the state of a Promise, making it easier to handle asynchronous operations. | ||
| --- | ||
| ### [**`useIdleDetection`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleDetection.md) | ||
| ### [**`usePut`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePut.md) | ||
| Monitors user idle state and screen lock status using the experimental Idle Detection API. | ||
| A specialized version of `useFetch` for making PUT requests. | ||
| --- | ||
| ### [**`useIdleFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleFetch.md) | ||
| ### [**`useQueue`**](https://github.com/supunlakmal/hooks/blob/main/docs/useQueue.md) | ||
| Initiates a data fetch after the user becomes active following a period of inactivity. | ||
| Manages a stateful queue (First-In, First-Out). | ||
| --- | ||
| ### [**`useIdleTimer`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleTimer.md) | ||
| ### [**`useQueryParam`**](https://github.com/supunlakmal/hooks/blob/main/docs/useQueryParam.md) | ||
| Monitors user activity and triggers callbacks based on idle/active status. | ||
| Synchronizes a React state variable with a URL query parameter. | ||
| --- | ||
| ### [**`useImageOnLoad`**](https://github.com/supunlakmal/hooks/blob/main/docs/useImageOnLoad.md) | ||
| ### [**`useRafCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRafCallback.md) | ||
| Tracks the loading status and dimensions of an image element. | ||
| Provides a way to schedule a callback function to be executed on the next animation frame using `requestAnimationFrame`. | ||
| --- | ||
| ### [**`useInfiniteScroll`**](https://github.com/supunlakmal/hooks/blob/main/docs/useInfiniteScroll.md) | ||
| ### [**`usePrevious`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePrevious.md) | ||
| Facilitates infinite scrolling using `IntersectionObserver` to trigger loading more data. | ||
| Tracks the previous value of a given state or prop from the last render. | ||
| --- | ||
| ### [**`useIntersectionObserver`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIntersectionObserver.md) | ||
| ### [**`useRafState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRafState.md) | ||
| Monitors the intersection of a target element with the viewport or an ancestor. | ||
| A React hook behaving like `useState`, but deferring state updates to the next browser animation frame using `requestAnimationFrame`. | ||
| --- | ||
| ### [**`useInterval`**](https://github.com/supunlakmal/hooks/blob/main/docs/useInterval.md) | ||
| ### [**`useReducerLogger`**](https://github.com/supunlakmal/hooks/blob/main/docs/useReducerLogger.md) | ||
| A declarative hook for setting intervals (`setInterval`) with automatic cleanup. | ||
| A development utility hook that wraps React's built-in `useReducer` hook and adds automatic console logging for every action dispatched. | ||
| --- | ||
| ### [**`useIntervalWhen`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIntervalWhen.md) | ||
| ### [**`useIsFirstRender`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIsFirstRender.md) | ||
| Sets up an interval that only runs when a specific condition is met. | ||
| Returns `true` if the component is rendering for the first time, and `false` for all subsequent renders. | ||
| --- | ||
| ### [**`useIsFirstRender`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIsFirstRender.md) | ||
| ### [**`useRenderCount`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRenderCount.md) | ||
| Returns `true` if the component is rendering for the first time, `false` otherwise. | ||
| Tracks the number of times a component has rendered. | ||
@@ -478,9 +478,15 @@ --- | ||
| Detects if the current viewport is mobile-sized based on a configurable breakpoint. | ||
| A React hook that detects whether the current viewport is mobile-sized based on a configurable breakpoint. | ||
| --- | ||
| ### [**`useRerender`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRerender.md) | ||
| Provides a function to force a component to re-render. | ||
| --- | ||
| ### [**`useIsMounted`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIsMounted.md) | ||
| A hook that returns true if the component is mounted. | ||
| Provides a way to check if a component is currently mounted. | ||
@@ -491,3 +497,3 @@ --- | ||
| Generates unique IDs that are stable across server and client rendering environments. | ||
| Generates unique IDs that are stable and consistent across server and client rendering environments. | ||
@@ -498,3 +504,3 @@ --- | ||
| A `useLayoutEffect` variant that works on the server and the client. | ||
| Uses `useLayoutEffect` on the client side and `useEffect` on the server side. | ||
@@ -509,17 +515,17 @@ --- | ||
| ### [**`useKeyPress`**](https://github.com/supunlakmal/hooks/blob/main/docs/useKeyPress.md) | ||
| ### [**`useLifecycleLogger`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLifecycleLogger.md) | ||
| Detects whether a specific key is currently being pressed down. | ||
| Logs the component's lifecycle events to the console, such as mount, update, and unmount. | ||
| --- | ||
| ### [**`useLifecycleLogger`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLifecycleLogger.md) | ||
| ### [**`useList`**](https://github.com/supunlakmal/hooks/blob/main/docs/useList.md) | ||
| A hook that logs the component's lifecycle events. | ||
| Provides a convenient way to manage a list of items with common operations like adding, removing, updating, and clearing. | ||
| --- | ||
| ### [**`useList`**](https://github.com/supunlakmal/hooks/blob/main/docs/useList.md) | ||
| ### [**`useKeyPress`**](https://github.com/supunlakmal/hooks/blob/main/docs/useKeyPress.md) | ||
| A hook that provides functions to manipulate a list. | ||
| Detects whether a specific key on the keyboard is currently being pressed down. | ||
@@ -530,3 +536,3 @@ --- | ||
| Manages an array state with helper functions for common array operations. | ||
| Provides a way to manage an array state with helper functions for common array operations. | ||
@@ -537,3 +543,3 @@ --- | ||
| Manages state persisted in `localStorage`, synchronizing across tabs. | ||
| Provides an easy way to use `localStorage` for state persistence across page refreshes and browser sessions. | ||
@@ -544,3 +550,3 @@ --- | ||
| Manages a queue of items persisted in local storage. | ||
| Manages a stateful queue (First-In, First-Out) that is persisted in the browser's Local Storage. | ||
@@ -551,21 +557,21 @@ --- | ||
| Get the value from local storage. | ||
| Provides a convenient way to manage a value stored in the browser's local storage. | ||
| --- | ||
| ### [**`useLogger`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLogger.md) | ||
| ### [**`useLocationBasedFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLocationBasedFetch.md) | ||
| Development utility to log component lifecycle events and prop changes. | ||
| Provides a way to fetch data from an API endpoint based on the user's geographical location. | ||
| --- | ||
| ### [**`useLongPress`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLongPress.md) | ||
| ### [**`useLogger`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLogger.md) | ||
| Detects long press gestures (mouse or touch) on a target element. | ||
| A development utility hook that logs component lifecycle events and optionally prop changes to the browser console. | ||
| --- | ||
| ### [**`useLocationBasedFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLocationBasedFetch.md) | ||
| ### [**`useLongPress`**](https://github.com/supunlakmal/hooks/blob/main/docs/useLongPress.md) | ||
| A fetch variant that uses the user's location for the API endpoint. | ||
| Detects long press gestures (holding down the mouse button or touch) on a target element. | ||
@@ -576,3 +582,3 @@ --- | ||
| Manages state in the form of a JavaScript `Map`, providing immutable update actions. | ||
| Manages state in the form of a JavaScript `Map` object, providing utility functions for common map operations. | ||
@@ -583,3 +589,3 @@ --- | ||
| Manages an object or a Map-like state with helper functions to set, remove, and reset key-value pairs. | ||
| Provides a convenient way to manage an object or a Map-like state in React functional components. | ||
@@ -590,9 +596,15 @@ --- | ||
| Get the size of an element. (Description inferred - doc file was blank). | ||
| A brief paragraph explaining the purpose and functionality of the hook. | ||
| --- | ||
| ### [**`useMediaQuery`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMediaQuery.md) | ||
| Tracks the state of a CSS media query, returning `true` if the query currently matches and `false` otherwise. | ||
| --- | ||
| ### [**`useMediaStream`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMediaStream.md) | ||
| Simplifies requesting and managing access to the user's camera and/or microphone. | ||
| Simplifies the process of requesting and managing access to the user's camera and/or microphone using the `navigator.mediaDevices.getUserMedia` API. | ||
@@ -603,18 +615,30 @@ --- | ||
| Manages a mediated state value. | ||
| Allows you to manage state that can be updated both internally and externally through a mediator function. | ||
| --- | ||
| ### [**`useMediaQuery`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMediaQuery.md) | ||
| ### [**`useMergeRefs`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMergeRefs.md) | ||
| Tracks the state of a CSS media query. | ||
| Merges multiple React refs (either callback refs or object refs) into a single callback ref. | ||
| --- | ||
| ### [**`useMergeRefs`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMergeRefs.md) | ||
| ### [**`useMousePosition`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMousePosition.md) | ||
| Merges multiple React refs (callback or object refs) into a single callback ref. | ||
| Tracks the current position of the mouse pointer globally within the window. | ||
| --- | ||
| ### [**`useNetworkAwareFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkAwareFetch.md) | ||
| Intelligently performs data fetching using `useFetch` only when the user's browser is detected as being online. | ||
| --- | ||
| ### [**`useNetworkAwareWebSocket`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkAwareWebSocket.md) | ||
| Manages a WebSocket connection, ensuring it is active only when the user's browser is online and a valid URL is provided. | ||
| --- | ||
| ### [**`useMount`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMount.md) | ||
@@ -626,410 +650,512 @@ | ||
| ### [**`useMousePosition`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMousePosition.md) | ||
| ### [**`useFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFetch.md) | ||
| Tracks the current position of the mouse pointer globally. | ||
| A custom React hook for fetching data from an API endpoint. | ||
| --- | ||
| ### [**`useFiniteStateMachine`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFiniteStateMachine.md) | ||
| Manages complex component state using an explicit state machine definition. | ||
| --- | ||
| ### [**`useFirstMountState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFirstMountState.md) | ||
| Provides a boolean value indicating whether the component is being mounted for the first time. | ||
| --- | ||
| ### [**`useMutation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useMutation.md) | ||
| Simplifies handling asynchronous data modification operations (POST, PUT, DELETE), managing status. | ||
| Simplifies handling asynchronous operations that modify data (like API POST, PUT, DELETE requests). | ||
| --- | ||
| ### [**`useNetworkAwareFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkAwareFetch.md) | ||
| ### [**`useFocusWithinState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFocusWithinState.md) | ||
| A `useFetch` variant that automatically refetches when the network status changes from offline to online. | ||
| Determines if a specified DOM element or any of its descendant elements currently have focus. | ||
| --- | ||
| ### [**`useNetworkAwareWebSocket`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkAwareWebSocket.md) | ||
| ### [**`useFocusTrap`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFocusTrap.md) | ||
| A `useWebSocket` variant that automatically reconnects when the network status changes from offline to online. | ||
| Manages keyboard focus, trapping it within a specified container element when active. | ||
| --- | ||
| ### [**`useNetworkSpeed`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkSpeed.md) | ||
| ### [**`useForceUpdate`**](https://github.com/supunlakmal/hooks/blob/main/docs/useForceUpdate.md) | ||
| Provides information about the user's network connection (speed, type) using the Network Information API. | ||
| Provides a function to force a component to re-render. | ||
| --- | ||
| ### [**`useNetworkState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNetworkState.md) | ||
| ### [**`useFormValidation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFormValidation.md) | ||
| Tracks the network state. | ||
| A comprehensive hook for managing form state, validation (on change, blur, submit), and submission handling in React. | ||
| --- | ||
| ### [**`useNewFullscreen`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNewFullscreen.md) | ||
| ### [**`useFullscreen`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFullscreen.md) | ||
| Enters and exits fullscreen mode for an element, tracking the current state. (Description inferred - doc was same as useFullscreen) | ||
| Provides functionality to enter and exit fullscreen mode for a specific HTML element. | ||
| --- | ||
| ### [**`useNotification`**](https://github.com/supunlakmal/hooks/blob/main/docs/useNotification.md) | ||
| ### [**`useFunctionalState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFunctionalState.md) | ||
| Utilizes the Notification API to display desktop notifications. | ||
| A brief paragraph explaining the purpose and functionality of the hook. | ||
| --- | ||
| ### [**`useOnlineStatus`**](https://github.com/supunlakmal/hooks/blob/main/docs/useOnlineStatus.md) | ||
| ### [**`useGeolocation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useGeolocation.md) | ||
| Tracks the browser's online/offline connection status. | ||
| Tracks the user's current geographic location using the browser's Geolocation API. | ||
| --- | ||
| ### [**`useOrientation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useOrientation.md) | ||
| ### [**`useGeolocationContinuous`**](https://github.com/supunlakmal/hooks/blob/main/docs/useGeolocationContinuous.md) | ||
| Tracks the screen orientation (landscape or portrait). | ||
| Provides continuous geolocation updates, allowing you to track the user's location in real-time. | ||
| --- | ||
| ### [**`usePageLeave`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePageLeave.md) | ||
| ### [**`useGet`**](https://github.com/supunlakmal/hooks/blob/main/docs/useGet.md) | ||
| Triggers a callback function when the user's mouse cursor leaves the main browser window or document area. | ||
| A specialized version of `useFetch` for making GET requests. | ||
| --- | ||
| ### [**`usePageVisibility`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePageVisibility.md) | ||
| ### [**`useForm`**](https://github.com/supunlakmal/hooks/blob/main/docs/useForm.md) | ||
| Tracks the visibility state of the current browser tab/page using the Page Visibility API. | ||
| A reusable hook for managing form state, handling input changes, and processing form submissions. | ||
| --- | ||
| ### [**`usePagination`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePagination.md) | ||
| ### [**`useHistoryState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHistoryState.md) | ||
| Manages pagination logic for client-side data sets. | ||
| Provides a way to manage state with built-in undo/redo capabilities. | ||
| --- | ||
| ### [**`usePermission`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePermission.md) | ||
| ### [**`useHover`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHover.md) | ||
| Queries the status of browser permissions (geolocation, notifications, etc.) using the Permissions API. | ||
| Tracks whether the mouse pointer is currently hovering over a specific DOM element. | ||
| --- | ||
| ### [**`usePersistentCounter`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePersistentCounter.md) | ||
| ### [**`useHookableRef`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHookableRef.md) | ||
| Manages a counter state that persists in local storage. | ||
| A brief paragraph explaining the purpose and functionality of the hook. | ||
| --- | ||
| ### [**`usePersistentToggle`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePersistentToggle.md) | ||
| ### [**`useIdleCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleCallback.md) | ||
| Manages boolean state that persists in local storage. | ||
| Provides a convenient way to schedule a function to be called during a browser's idle periods. | ||
| --- | ||
| ### [**`usePinchZoom`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePinchZoom.md) | ||
| ### [**`useHoverDelay`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHoverDelay.md) | ||
| Detects and reacts to pinch-to-zoom gestures on a specified element. | ||
| Tracks whether a user has hovered over a specific element for a minimum duration. | ||
| --- | ||
| ### [**`usePortal`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePortal.md) | ||
| ### [**`useIdleDetection`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleDetection.md) | ||
| Simplifies the creation and management of React Portals. | ||
| Interacts with the experimental Idle Detection API to monitor the user's idle state and screen lock status. | ||
| --- | ||
| ### [**`usePrefersReducedMotion`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePrefersReducedMotion.md) | ||
| ### [**`useIdleFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleFetch.md) | ||
| Tracks the user's preference for reduced motion using the `prefers-reduced-motion` media query. | ||
| Initiates a data fetch request using `useFetch` only _after_ the user becomes active following a specified period of inactivity. | ||
| --- | ||
| ### [**`usePreferredLanguages`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePreferredLanguages.md) | ||
| ### [**`useIdleTimer`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIdleTimer.md) | ||
| Returns an array of the user's preferred languages, as configured in their browser. | ||
| Monitors user activity within the browser window and triggers callbacks when the user becomes idle or active again. | ||
| --- | ||
| ### [**`usePrevious`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePrevious.md) | ||
| ### [**`useHasBeenVisible`**](https://github.com/supunlakmal/hooks/blob/main/docs/useHasBeenVisible.md) | ||
| Tracks the previous value of a state or prop from the last render. | ||
| Determines if a referenced DOM element has ever been visible within the viewport at least once. | ||
| --- | ||
| ### [**`usePreviousDifferent`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePreviousDifferent.md) | ||
| ### [**`useImageOnLoad`**](https://github.com/supunlakmal/hooks/blob/main/docs/useImageOnLoad.md) | ||
| Tracks the previous different value of a state or prop from the last render. | ||
| Tracks the loading status, potential errors, and natural dimensions of an image element. | ||
| --- | ||
| ### [**`usePromise`**](https://github.com/supunlakmal/hooks/blob/main/docs/usePromise.md) | ||
| ### [**`useInfiniteScroll`**](https://github.com/supunlakmal/hooks/blob/main/docs/useInfiniteScroll.md) | ||
| Simplifies handling promises, managing loading, error, and success states. | ||
| Facilitates the implementation of infinite scrolling by using the `IntersectionObserver` API. | ||
| --- | ||
| ### [**`useQueue`**](https://github.com/supunlakmal/hooks/blob/main/docs/useQueue.md) | ||
| ### [**`useIntersectionObserver`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIntersectionObserver.md) | ||
| Manages a stateful queue (First-In, First-Out). | ||
| Monitors the intersection of a target DOM element with an ancestor element or with the device's viewport. | ||
| --- | ||
| ### [**`useRafCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRafCallback.md) | ||
| ### [**`useInterval`**](https://github.com/supunlakmal/hooks/blob/main/docs/useInterval.md) | ||
| Creates a callback based on requestAnimationFrame. | ||
| A declarative hook for setting intervals (`setInterval`) in React components. | ||
| --- | ||
| ### [**`useRafState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRafState.md) | ||
| ### [**`useIntervalWhen`**](https://github.com/supunlakmal/hooks/blob/main/docs/useIntervalWhen.md) | ||
| Manages state updates deferred to the next browser animation frame. | ||
| Sets up an interval (`setInterval`) which only runs when a specific condition is met. | ||
| --- | ||
| ### [**`useReducerLogger`**](https://github.com/supunlakmal/hooks/blob/main/docs/useReducerLogger.md) | ||
| ### [**`useDebounce`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebounce.md) | ||
| Wraps `useReducer` to automatically log actions and state changes in development. | ||
| Debounces a value. This hook is useful when you want to delay the execution of a function or the update of a value. | ||
| --- | ||
| ### [**`useRenderCount`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRenderCount.md) | ||
| ### [**`useDebouncedEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedEffect.md) | ||
| Tracks the number of times a component has rendered. | ||
| Similar to `useEffect`, but delays the execution of the effect callback until dependencies have stopped changing for a specified time. | ||
| --- | ||
| ### [**`useRerender`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRerender.md) | ||
| ### [**`useDebouncedCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedCallback.md) | ||
| Force to re-render the component. | ||
| Creates a debounced version of a callback function, limiting the rate at which it can be executed. | ||
| --- | ||
| ### [**`useResetState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useResetState.md) | ||
| ### [**`useDebouncedFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedFetch.md) | ||
| Provides a state variable and a function to reset it to its initial value. | ||
| Wraps the Fetch API and debounces the requests. | ||
| --- | ||
| ### [**`useResizeObserver`**](https://github.com/supunlakmal/hooks/blob/main/docs/useResizeObserver.md) | ||
| ### [**`useDebouncedGeolocation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedGeolocation.md) | ||
| Monitors changes to the dimensions of a target element using the `ResizeObserver` API. | ||
| Provides access to the device's geolocation information, but debounces the state updates. | ||
| --- | ||
| ### [**`useRouteChange`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRouteChange.md) | ||
| ### [**`useDarkMode`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDarkMode.md) | ||
| Executes a callback whenever the browser's URL path changes (handles `popstate` and `pushState`). | ||
| Manages application theme preference (dark/light mode). | ||
| --- | ||
| ### [**`useRovingTabIndex`**](https://github.com/supunlakmal/hooks/blob/main/docs/useRovingTabIndex.md) | ||
| ### [**`useDebouncedMediaQuery`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedMediaQuery.md) | ||
| Implements the roving tabindex accessibility pattern for keyboard navigation within a group. | ||
| Determines if a CSS media query matches the current environment, but with a debounced result. | ||
| --- | ||
| ### [**`useScreenOrientation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScreenOrientation.md) | ||
| ### [**`useDebouncedState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedState.md) | ||
| Tracks the screen orientation (angle, type) using the Screen Orientation API. | ||
| Provides a way to debounce state updates, delaying the update until the user has stopped typing for a short period. | ||
| --- | ||
| ### [**`useScript`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScript.md) | ||
| ### [**`useDebouncedWindowSize`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDebouncedWindowSize.md) | ||
| Dynamically loads an external JavaScript script and tracks its loading status. | ||
| Provides the current window dimensions, but updates the returned values only after a specified debounce delay. | ||
| --- | ||
| ### [**`useScrollLock`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollLock.md) | ||
| ### [**`useDeepCompareEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDeepCompareEffect.md) | ||
| Prevents scrolling on the `body` element. | ||
| A drop-in replacement for `React.useEffect` that performs a **deep comparison** of its dependencies. | ||
| --- | ||
| ### [**`useScrollPosition`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollPosition.md) | ||
| ### [**`useDefault`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDefault.md) | ||
| Tracks the current X and Y scroll position of the window or a specified element. | ||
| Returns a default value if the provided value is `null` or `undefined`. | ||
| --- | ||
| ### [**`useScrollSpy`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollSpy.md) | ||
| ### [**`useDelete`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDelete.md) | ||
| Monitors scroll position to determine which section element is currently active in the viewport. | ||
| A specialized version of `useFetch` for making DELETE requests. | ||
| --- | ||
| ### [**`useScrollToTop`**](https://github.com/supunlakmal/hooks/blob/main/docs/useScrollToTop.md) | ||
| ### [**`useDerivedState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDerivedState.md) | ||
| Provides a function to programmatically scroll the window to the top. | ||
| Computes derived state based on other values (like props or other state variables). | ||
| --- | ||
| ### [**`useSessionStorage`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSessionStorage.md) | ||
| ### [**`useDeviceMotion`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDeviceMotion.md) | ||
| Manages state persisted in `sessionStorage` for the duration of the session. | ||
| Provides access to the device's motion sensor data, allowing you to track acceleration and rotation rates. | ||
| --- | ||
| ### [**`useSet`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSet.md) | ||
| ### [**`useDeviceOrientation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDeviceOrientation.md) | ||
| Manages state in the form of a JavaScript `Set`, providing immutable update actions. | ||
| Tracks the physical orientation of the hosting device relative to the Earth's coordinate frame. | ||
| --- | ||
| ### [**`useSetState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSetState.md) | ||
| ### [**`useDocumentTitle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDocumentTitle.md) | ||
| Manages object state allowing partial updates, similar to class component `setState`. | ||
| Sets the document's title (`document.title`). | ||
| --- | ||
| ### [**`useStepper`**](https://github.com/supunlakmal/hooks/blob/main/docs/useStepper.md) | ||
| ### [**`useDrag`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDrag.md) | ||
| A hook to use a basic step logic. | ||
| Provides basic drag event handling for an element. | ||
| --- | ||
| ### [**`useStorageValue`**](https://github.com/supunlakmal/hooks/blob/main/docs/useStorageValue.md) | ||
| ### [**`useDraggable`**](https://github.com/supunlakmal/hooks/blob/main/docs/useDraggable.md) | ||
| A hook to get the value from local or session storage. | ||
| Adds draggability to an HTML element using pointer events. | ||
| --- | ||
| ### [**`useSwipe`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSwipe.md) | ||
| ### [**`useElementSize`**](https://github.com/supunlakmal/hooks/blob/main/docs/useElementSize.md) | ||
| Detects swipe gestures (left, right, up, down) on touch-enabled devices for a specified element. | ||
| Efficiently tracks the dimensions (content width and height) of a specified DOM element using the `ResizeObserver` API. | ||
| --- | ||
| ### [**`useSyncedLocalStorage`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSyncedLocalStorage.md) | ||
| ### [**`useEnum`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEnum.md) | ||
| Manages state persisted in `localStorage` and synchronizes across tabs. | ||
| A brief paragraph explaining the purpose and functionality of the hook. | ||
| --- | ||
| ### [**`useSyncedRef`**](https://github.com/supunlakmal/hooks/blob/main/docs/useSyncedRef.md) | ||
| ### [**`useErrorBoundary`**](https://github.com/supunlakmal/hooks/blob/main/docs/useErrorBoundary.md) | ||
| Create a ref that syncs with another value. | ||
| Provides state management and control functions for handling JavaScript errors within a component tree. | ||
| --- | ||
| ### [**`useTextSelection`**](https://github.com/supunlakmal/hooks/blob/main/docs/useTextSelection.md) | ||
| ### [**`useEventCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEventCallback.md) | ||
| Tracks the text currently selected by the user within the document. | ||
| Creates a stable function reference (memoized callback) that always delegates to the _latest_ version of the provided callback function. | ||
| --- | ||
| ### [**`useThrottle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottle.md) | ||
| ### [**`useEventListener`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEventListener.md) | ||
| Throttles a value, delaying updates until a certain time has passed without changes. | ||
| A robust hook for declaratively adding event listeners to the `window`, `document`, a DOM element, or a React ref. | ||
| --- | ||
| ### [**`useThrottledCallback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledCallback.md) | ||
| ### [**`useEventSource`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEventSource.md) | ||
| Throttles a callback, ensuring updates do not occur more frequently than a specified limit. | ||
| Establishes and manages a connection to a Server-Sent Events (SSE) endpoint using the `EventSource` API. | ||
| --- | ||
| ### [**`useThrottledEventListener`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledEventListener.md) | ||
| ### [**`useEyeDropper`**](https://github.com/supunlakmal/hooks/blob/main/docs/useEyeDropper.md) | ||
| Attaches an event listener and throttles the callback execution. | ||
| Provides an interface to the experimental EyeDropper API, allowing users to sample colors from anywhere on their screen. | ||
| --- | ||
| ### [**`useThrottledScroll`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledScroll.md) | ||
| ### [**`useFavicon`**](https://github.com/supunlakmal/hooks/blob/main/docs/useFavicon.md) | ||
| Tracks the window's scroll position with throttled updates. | ||
| Dynamically sets the website's favicon. | ||
| --- | ||
| ### [**`useThrottledState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useThrottledState.md) | ||
| ### [**`useAnimation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useAnimation.md) | ||
| Throttles a state, ensuring updates do not occur more frequently than a specified limit. | ||
| Manages a simple time-based animation loop using `requestAnimationFrame`. | ||
| --- | ||
| ### [**`useTimeout`**](https://github.com/supunlakmal/hooks/blob/main/docs/useTimeout.md) | ||
| ### [**`useAnimationFrame`**](https://github.com/supunlakmal/hooks/blob/main/docs/useAnimationFrame.md) | ||
| A declarative hook for setting timeouts (`setTimeout`) with automatic cleanup. | ||
| Takes a callback function as an argument, which will be executed on each frame of the `requestAnimationFrame` loop. | ||
| --- | ||
| ### [**`useToggle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useToggle.md) | ||
| ### [**`useAsync`**](https://github.com/supunlakmal/hooks/blob/main/docs/useAsync.md) | ||
| Manages boolean state with convenient toggle, setOn, and setOff functions. | ||
| Simplifies handling asynchronous operations (like API calls) in React components. | ||
| --- | ||
| ### [**`useTranslation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useTranslation.md) | ||
| ### [**`useAsyncAbortable`**](https://github.com/supunlakmal/hooks/blob/main/docs/useAsyncAbortable.md) | ||
| A basic hook for handling internationalization (i18n) with static resources. | ||
| Manages asynchronous operations, providing a way to execute an async function and abort it if needed. | ||
| --- | ||
| ### [**`useUnmount`**](https://github.com/supunlakmal/hooks/blob/main/docs/useUnmount.md) | ||
| ### [**`useBatteryStatus`**](https://github.com/supunlakmal/hooks/blob/main/docs/useBatteryStatus.md) | ||
| Executes a cleanup function exactly once when the component unmounts. | ||
| Provides real-time information about the device's battery status. | ||
| --- | ||
| ### [**`useUnmountEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useUnmountEffect.md) | ||
| ### [**`useBoolean`**](https://github.com/supunlakmal/hooks/blob/main/docs/useBoolean.md) | ||
| Executes a cleanup function when the component unmounts. | ||
| Provides a convenient way to manage a boolean state with helper functions to toggle, set to true, and set to false. | ||
| --- | ||
| ### [**`useUpdateEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useUpdateEffect.md) | ||
| ### [**`useBreakpoint`**](https://github.com/supunlakmal/hooks/blob/main/docs/useBreakpoint.md) | ||
| A `useEffect` variant that skips the effect execution after the initial render (mount). | ||
| Determines the currently active responsive breakpoint based on window width. | ||
| --- | ||
| ### [**`useVibration`**](https://github.com/supunlakmal/hooks/blob/main/docs/useVibration.md) | ||
| ### [**`useBroadcastChannel`**](https://github.com/supunlakmal/hooks/blob/main/docs/useBroadcastChannel.md) | ||
| Utilizes the Vibration API to trigger device vibrations. | ||
| Enables cross-tab/window communication between same-origin contexts using the Broadcast Channel API. | ||
| --- | ||
| ### [**`useVirtualList`**](https://github.com/supunlakmal/hooks/blob/main/docs/useVirtualList.md) | ||
| ### [**`useCachedFetch`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCachedFetch.md) | ||
| Performance optimization for rendering long lists by rendering only visible items (fixed height). | ||
| Similar to `useFetch` but with an added layer of simple in-memory caching. | ||
| --- | ||
| ### [**`useVisibility`**](https://github.com/supunlakmal/hooks/blob/main/docs/useVisibility.md) | ||
| ### [**`useClickOutside`**](https://github.com/supunlakmal/hooks/blob/main/docs/useClickOutside.md) | ||
| Tracks whether a target element is currently visible within the viewport or an ancestor using `IntersectionObserver`. | ||
| Executes a callback function when a click (or touch) event occurs outside of a specified DOM element. | ||
| --- | ||
| ### [**`useWakeLock`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWakeLock.md) | ||
| ### [**`useClickOutsideWithEscape`**](https://github.com/supunlakmal/hooks/blob/main/docs/useClickOutsideWithEscape.md) | ||
| Manages the Screen Wake Lock API to prevent the screen from sleeping. | ||
| Triggers a callback function when the user either clicks outside of a specified DOM element or presses the 'Escape' key. | ||
| --- | ||
| ### [**`useWebSocket`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWebSocket.md) | ||
| ### [**`useClipboard`**](https://github.com/supunlakmal/hooks/blob/main/docs/useClipboard.md) | ||
| Manages WebSocket connections, state, messaging, and automatic reconnection. | ||
| Provides functionality to interact with the system clipboard using the modern asynchronous Clipboard API. | ||
| --- | ||
| ### [**`useWebWorker`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWebWorker.md) | ||
| ### [**`useClipboardWithFeedback`**](https://github.com/supunlakmal/hooks/blob/main/docs/useClipboardWithFeedback.md) | ||
| Runs a function in a Web Worker thread to offload heavy computations from the main thread. | ||
| Wraps the `useClipboard` hook to provide visual feedback when text has been successfully copied to the clipboard. | ||
| --- | ||
| ### [**`useWhyDidYouUpdate`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWhyDidYouUpdate.md) | ||
| ### [**`useConditionalEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useConditionalEffect.md) | ||
| Development utility to debug component re-renders by logging changed props. | ||
| Runs a side effect only when a specific condition is met. | ||
| --- | ||
| ### [**`useWindowSize`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWindowSize.md) | ||
| ### [**`useConst`**](https://github.com/supunlakmal/hooks/blob/main/docs/useConst.md) | ||
| Returns the current dimensions (width and height) of the browser window. | ||
| Initializes and returns a value that remains constant throughout the component's lifecycle. | ||
| --- | ||
| ### [**`useWorker`**](https://github.com/supunlakmal/hooks/blob/main/docs/useWorker.md) | ||
| ### [**`useContextMenu`**](https://github.com/supunlakmal/hooks/blob/main/docs/useContextMenu.md) | ||
| Offloads expensive computations or functions to a separate Web Worker thread (alternative to useWebWorker). | ||
| Provides state and logic for implementing a custom context menu (right-click menu). | ||
| --- | ||
| ### [**`useControlledRerenderState`**](https://github.com/supunlakmal/hooks/blob/main/docs/useControlledRerenderState.md) | ||
| Provides a mechanism to manually trigger re-renders of a component based on an external condition or state change. | ||
| --- | ||
| ### [**`useCookie`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCookie.md) | ||
| Provides a convenient interface for reading, writing, and deleting cookies. | ||
| --- | ||
| ### [**`useCopyToClipboard`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCopyToClipboard.md) | ||
| Provides a function to copy text to the user's clipboard and tracks the success or failure status. | ||
| --- | ||
| ### [**`useCountdown`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCountdown.md) | ||
| Manages a countdown timer with start, pause, and reset controls. | ||
| --- | ||
| ### [**`useCounter`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCounter.md) | ||
| Manages a numerical counter, allowing for incrementing, decrementing, and resetting. | ||
| --- | ||
| ### [**`useCustomCompareEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCustomCompareEffect.md) | ||
| A drop-in replacement for `React.useEffect` that uses a custom comparison function for its dependencies. | ||
| --- | ||
| ### [**`useCustomCompareMemo`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCustomCompareMemo.md) | ||
| Works like `useMemo` but allows you to define a custom comparison function for its dependencies. | ||
| --- | ||
| ### [**`useCycle`**](https://github.com/supunlakmal/hooks/blob/main/docs/useCycle.md) | ||
| Allows you to cycle through a list of values. | ||
| --- | ||
| ### [**`use-mobile`**](https://github.com/supunlakmal/hooks/blob/main/docs/use-mobile.md) | ||
| Determines whether the current device is a mobile device based on screen width. | ||
| --- | ||
| ### [**`useTranslation`**](https://github.com/supunlakmal/hooks/blob/main/docs/useTranslation.md) | ||
| A basic hook for handling internationalization (i18n). | ||
| --- | ||
| ### [**`useUnmountEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useUnmountEffect.md) | ||
| Runs its effect function only once, specifically when the component unmounts. | ||
| --- | ||
| ### [**`useUnmount`**](https://github.com/supunlakmal/hooks/blob/main/docs/useUnmount.md) | ||
| Executes a cleanup function when the component unmounts. | ||
| --- | ||
| ### [**`useUpdateEffect`**](https://github.com/supunlakmal/hooks/blob/main/docs/useUpdateEffect.md) | ||
| Functions similarly to `useEffect`, but skips running the effect callback after the initial render. | ||
| --- | ||
| ### [**`useVibration`**](https://github.com/supunlakmal/hooks/blob/main/docs/useVibration.md) | ||
| Interacts with the browser's Vibration API. | ||
| --- | ||
| ### [**`useVirtualList`**](https://github.com/supunlakmal/hooks/blob/main/docs/useVirtualList.md) | ||
| A performance optimization hook for rendering long lists by only rendering visible items. | ||
| ## Live Demo | ||
| A live demo environment showcasing all hooks will be available [**`here`**](https://hooks-showcase-chi.vercel.app/) |
No alert changes
Improved metrics
- Total package byte prevSize
891644
0.72%- Number of lines in readme file
1148
12.33%No dependency changes