react-pre-hooks

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

List Of Hooks

useAnimationFrame	Handle the requestAnimationFrame method of the window object.
useArray	This hook returns an array with with some common and useful array methods making the code minimal and maintainable.
useAsync	This hook simplifies the execution of an async function by returning its states and results.
useAudioAnalyser	This hook uses and audio analyser to create and an audio visualizer from a media element (audio/video) or the user microphone.
useBeforeUnload	Stop the user before closing the window using this hook.
useBoolean	A hook that toggles between true and false.
useClickAway	Execute a function when the user clicks outside a target element.
useClient	A solution to fix the hydration error in Next.js.
useClipboard	Copy to the clipboard and return a temporary copied state.
useClock	This hook returns the current date time every second or a timeout value.
useContextMenu	Handle the user right clicks on a target element with this hook.
useCounter	Use a simple counter with min and max values, and some methods to minimalize the component.
useDebouncedState	This hook returns a state that Updates its value after a specific delay to handle fast updated values.
useDevice	Detect the device type with some boolean values.
useDragAndDrop	You can handle the user drag actions on a container element using this hook, and it can also handle the mobile touches.
useEasing	Change a value from a start to an end value using an animation timing function.
useEventListener	Add one or multiple event listeners to a specific target element, window, or document object, if you're using typescript you will get auto-completion for the event listeners.
useFetch	Fetch data with a URL and search parameters using useAsync hook.
useFileDropArea	Build a file drop area component easily with this hook, it handles file dropping to a label of a file input.
useFullscreen	Toggle the fullscreen mode on a target element using this hook.
useGeolocation	Track the current geolocation of the client using this hook.
useGridLayout	Track the number of rows and columns of a grid layout using this hook.
useHash	Track and update the window location hash value using this hook.
useHover	This hook returns whether the target element is hovered or not, and it can use a delay value as well for both hover and unhover events.
useImageLoader	Use this hook to load an image in the background using its URL, and returns its loading state.
useInView	This hook uses useIntersectionObserver hook and returns the intersecting state.
useIntersectionObserver	Handle the IntersectionObserver using this hook.
useInterval	This hook makes setInterval easy to use and control with some useful methods.
useIsomorphicEffect	This hook is a replacement for useEffect that works in both browser and 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	This hook returns a map object with with its props and methods to make the code minimal and maintainable.
useMediaDevices	This hook uses the user media devices (camera and microphone) and returns their states and controls as well as their stream object.
useMediaQuery	Track the matchMedia changes of a media query using this hook.
useMediaRecorder	Generate a recorded (video/audio) from a media stream object using the media recorder with its state and controller methods.
useMousePosition	This hook tracks the mouse cursor position of a target element.
useMutationObserver	Handles the MutationObserver and tracks changes being made to the DOM tree.
useNetworkState	This hook can track the user connection changes and return whether is online or offline with some of the user network informations.
useOrientation	Track the screen orientation type using this hook.
usePageVisibility	Check if the tab contents is visible or hidden using this hook.
usePointerLock	Toggle the pointer lock mode on a target element using this hook.
usePointers	Handle all the pointer events at once using this hook.
usePreferredLanguage	Track the current user preferred language using this hook.
useResizeObserver	Handle the ResizeObserver using this hook.
useScreenCapture	This hook uses the user screen capture and returns its states and controls as well as the media stream object.
useScrollDirection	This hook detects the scroll direction of the window or a target element.
useScrollPosition	This hook tracks the scroll position and progress of a target element.
useScrollThreshold	Returns a boolean state that indicates if the user has passed a specified scroll threshold.
useSelection	This hook returns the current selected text on the window or a specific element, and other things.
useSessionStorage	Get and Set a specific value in the session storage.
useSet	This hook returns an set with with some common and useful set methods making the code minimal and maintainable.
useSize	Track the element size easily using useResizeObserver.
useSpeech	This hook uses a text speaker with available voices as well as its state and controller methods.
useStateHistory	This hook stores a specific number of the previous state values and uses a pointer to switch between them.
useStateStatus	This hook returns the state and its current status using a state handler.
useSwiping	You can handle the user swipe actions using this hook, and it can also handle the mouse swipes.
useTimeout	This hook makes setTimeout easy to use and control with some useful methods.
useTimer	You can create a timer or a countdown with many options using this hook.
useToggle	Toggles a state between an array of values.
useUnmount	Execute a callback function before the component is unmounted (leaves the DOM).
useViewport	Track the screen viewport (screen width and height).

Contributing

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