![\"Logo\"](\"https://raw.githubusercontent.com/malkiii/react-pre-hooks/master/docs/public/logo.svg\"){kind=logo}
\n\n# react-pre-hooks\n\nSimplify and clean up your components with this react hooks collection.\n\n
![\"version\"](\"https://img.shields.io/npm/v/react-pre-hooks?label=latest%20version&color=0086E0\")
\n![\"Documentation\"](\"https://img.shields.io/badge/documentation-website-0086E0\"){kind=icon}
\n![\"Downloads\"](\"https://img.shields.io/npm/dm/react-pre-hooks?color=0086E0\")
\n![\"License\"](\"https://img.shields.io/github/license/malkiii/react-pre-hooks?color=0086E0\")
\n![\"Workflow\"](\"https://github.com/malkiii/react-pre-hooks/actions/workflows/ci.yml/badge.svg\"){kind=icon}
\n\n\n\n\n\n\n\n| Name | Description |
|---|---|
| useAnimationFrame | Handle the requestAnimationFrame\nAPI 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 |
| 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, |
| useFileDropArea | Handle the user file dropping and uploading 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\nusing 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\nstate 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\ntheir 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\nto track changes being made to the DOM tree. |
| useNetworkState | Handle the NetworkInformation API\nand 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\nto 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\nin the session storage. |
| useSwiping | Handle the user swipe actions on a container element. |
| useTimeout | Use a setTimeout\nstate 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. |