45 packages
@custom-react-hooks/all
A collection of reusable React hooks by custom-react-hooks.
@custom-react-hooks/use-async
The `useAsync` hook simplifies the handling of asynchronous operations in React applications, such as data fetching or any other promise-returning functions. It provides a structured way to track the status and outcome of async operations.
@custom-react-hooks/use-cache
A React hook for in-memory caching with TTL support
@custom-react-hooks/use-click-outside
The `useClickOutside` hook is designed to detect and handle clicks outside of a specified element or set of elements. This is particularly useful for closing modal windows, dropdowns, and other components when a user interacts outside of them.
@custom-react-hooks/use-clipboard
`useClipboard` is a React hook that provides a comprehensive interface for clipboard operations. It offers advanced features like automatic clipboard content reading, change detection, and polling capabilities, making it perfect for building sophisticated
@custom-react-hooks/use-debounce
The `useDebounce` hook is used to delay the execution of a function until a specified amount of time has passed since it was last invoked. This is useful for handling rapid user input scenarios, such as search input fields or window resizing.
@custom-react-hooks/use-document-title
`useDocumentTitle` is a custom React hook for dynamically setting the document title. It updates the title shown in the browser tab, enhancing the user experience by reflecting the current page or content state.
@custom-react-hooks/use-drag-drop
`useDragDrop` is a combined React hook that facilitates drag-and-drop interactions in your application. It abstracts the handling of both draggable elements and drop targets, simplifying the implementation of drag-and-drop functionality.
@custom-react-hooks/use-effect-once
`useEffectOnce` is a custom hook in React designed to mimic the behavior of `componentDidMount` and `componentWillUnmount` lifecycle methods in class components. It's a modified version of `useEffect` that runs only once when the component mounts.
@custom-react-hooks/use-element-size
`useElementSize` is a React hook that enables dynamic tracking of an HTML element's dimensions. It updates the element's width and height in response to window resizing, element mounting/unmounting, and ref changes.
@custom-react-hooks/use-event-listener
The `useEventListener` hook is a custom React hook that simplifies the process of adding and removing event listeners in your React components. It handles the lifecycle of the event listener, ensuring it is cleaned up when the component unmounts or depend
@custom-react-hooks/use-fetch
The `useFetch` hook is a powerful tool for making API requests in React applications. It simplifies the process of fetching data from a URL and handles various advanced features like caching, timeouts, and integration with global state management systems.
@custom-react-hooks/use-form
The `useForm` hook is an advanced form management tool for React applications, providing capabilities for managing form state, validation, loading status, and submission feedback.
@custom-react-hooks/use-geo-location
The `useGeoLocation` hook is a powerful tool for accessing and monitoring the user's geographical location in React applications. It offers features such as continuous location watching, error handling, and customizable geolocation options.
@custom-react-hooks/use-history-state
A React hook that extends useState with undo/redo functionality
@custom-react-hooks/use-hover
The `useHover` hook is a utility for detecting hover interactions in React components. It simplifies the process of tracking when a user's mouse pointer hovers over an element.
@custom-react-hooks/use-idle
`useIdle` is a React hook designed to detect user inactivity or idle time in applications. It triggers a state change after a specified period of inactivity, making it useful for actions like auto-logout or activity pausing.
@custom-react-hooks/use-image-load
`useImageLoad` is a custom React hook designed to enhance the user experience by efficiently loading images. It supports lazy loading to improve performance and provides detailed status updates during the image loading process.
@custom-react-hooks/use-island
A React hook for island architecture and selective hydration
@custom-react-hooks/use-key-press
The `useKeyPress` hook is an advanced utility for detecting specific keypress events in React applications. It supports customizable debounce timing and can listen for keypress events either globally or locally within a component.
@custom-react-hooks/use-lock-body-scroll
`useLockBodyScroll` is a React hook for controlling the scroll behavior of the body element in web applications. It's particularly useful for scenarios like opening modals or overlays where background scroll needs to be disabled.
@custom-react-hooks/use-long-press
The `useLongPress` hook is designed for adding long press interactions to elements in React applications. It provides a flexible way to handle long press events with customizable thresholds and callbacks.
@custom-react-hooks/use-media-devices
`useMediaDevices` is a React hook that offers an easy way to access and monitor media devices like cameras, microphones, and speakers. It not only lists all available media input and output devices but also manages user permissions to retrieve detailed de
@custom-react-hooks/use-media-query
The `useMediaQuery` hook is designed for responsive design in React applications. It enables components to adapt to different screen sizes or respond to media query changes.
@custom-react-hooks/use-mouse
The `useMouse` hook is designed for tracking the mouse position within a specified element in React applications. It's enhanced to provide additional features such as offsetting the mouse position and avoiding edges of the screen, which is useful for tool