react-pre-hooks

Simplify and clean up your components with this react hooks collection.

List Of Hooks

Name	Description
useAnimationFrame	Handle the requestAnimationFrame API to call a function on every frame render.
useArray	Use an array state with some common and simple array methods.
useAsyncCallback	Handle the execution of an async function with return data, error, and pending states.
useAudioAnalyser	Use the AnalyserNode API to analyze audio data.
useBoolean	Toggle between true and false using a boolean state.
useClickAway	Execute a function when the user clicks outside a target element.
useClipboard	Copy and paste text using the clipboard with a copied state.
useClock	Get the current time with an updated Date state.
useCounter	Use simple counter methods to update a number state.
useDebouncedState	Update a state after a specified delay.
useDragAndDrop	Handle the user drag actions on a container element.
useEventListener	Add an event listener with one or multiple events to an HTML element, window, or document object.
useFileDropArea	Handle the user file uploading, dropping, and pasting to an area element.
useForceUpdate	Force re-render the component.
useFullscreen	Toggle the fullscreen mode on a target element.
useGamepad	Handle the user gamepad connections and changes.
useGeolocation	Track the current geolocation of the client using the Geolocation API.
useGridLayout	Track the number of rows and columns of an element with a grid layout.
useInView	Track the visibility of a target element using useIntersectionObserver hook.
useIntersectionObserver	Handle the IntersectionObserver API.
useInterval	Use a setInterval state with some methods to control it.
useIsomorphicEffect	A replacement for useLayoutEffect that works on the browser and the server.
useKeyboard	Bind any keyboard keys or hotkeys with handlers in a very simple way.
useLocalStorage	Get and Set a specific value in the local storage.
useMediaDevices	Use the user media devices (camera and microphone) with their MediaStream object.
useMediaQuery	Track the user media query changes using a boolean state.
useMousePosition	Track the user's mouse cursor position on the window or a target element.
useMutationObserver	Handle the MutationObserver to track changes being made to the DOM tree.
useNetworkState	Handle the NetworkInformation API and the user network connection changes.
useOrientation	Track the device's orientation state and its changes.
usePageVisibility	Check if the current tab is visible or hidden to the user.
usePointers	Handle all the user pointer events at once.
usePreferredLanguage	Get the user's preferred language from the browser.
useRect	Track the bounding DOMRect of a target element.
useResizeObserver	Handle the ResizeObserver API.
useScreenCapture	Use the Screen Capture API to capture the screen, window, or browser tab.
useScrollDirection	Detect the user scroll direction on the window or a target element.
useScrollPosition	Track the scroll position or progress of the window or a target element.
useScrollThreshold	Check if the user has scrolled past a certain threshold using a given offset or handler.
useSelection	Get the current selected text with its position on the window or a target element.
useSessionStorage	Get and Set a specific value in the session storage.
useSwiping	Handle the user swipe actions on a container element.
useTimeout	Use a setTimeout state with some methods to control it.
useToggle	Toggle a state between a given array of values.
useViewport	Track the current screen viewport (width and height).
useWorker	Use the Worker API to run a script in the background.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.