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.
useContextMenu	Handle the user right clicks on a target element to show a context menu.
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.
useFetch	Fetch data with a URL and search parameters using useAsync hook.
useFileDropArea	Handle the user file dropping and uploading to an area element.
useFocus	Use a state to track the focus/blur event of a target element.
useFormData	Handle your form data using some methods with the FormData API.
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.
useHash	Track and update the window location #hash value.
useImageLoader	Load an image in the background using its URL with a loading state.
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.
useMap	Use a Map state with some common and simple map methods.
useMediaDevices	Use the user media devices (camera and microphone) with their media stream object.
useMediaQuery	Track the user media query changes using a boolean state.
useMediaRecorder	Handle the MediaRecorder API to record media streams.
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	Track the network connection changes and get the current network state.
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.
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.
useSet	Use a Set state with some common and simple set methods.
useStateHistory	Keep track of the state history with a limit and navigate through it.
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.