|
React Custom Hooks Snippets for VS Code
| Hook | Description |
|---|---|
| useFetch | A hook to fetch data from a URL. |
| useAsync | A hook to handle asynchronous tasks. |
| useArray | A hook for managing and manipulating an array with functions like push, filter, update, remove, and clear. |
| useClickOutside | A hook to detect clicks outside a specified element and trigger a callback. |
| useCookie | A hook for managing cookies with get, set, and delete functionality. |
| useCopyToClipboard | A hook to copy text to the clipboard and track success. |
| useDebounce | A hook to debounce a callback function with a specified delay. |
| useDeepCompareEffect | A hook for running an effect with dependencies that are deeply compared. |
| useEffectOnce | A hook to run an effect only once on mount. |
| useGeolocation | A hook to get and watch the user's geolocation. |
| useHover | A hook to track whether an element is being hovered over. |
| useMediaQuery | A hook to detect whether a media query matches. |
| useOnlineStatus | A hook to detect the online/offline status of the browser. |
| useOnScreen | A hook to detect if an element is visible within the viewport. |
| usePrevious | A hook to keep track of the previous value of a state or prop. |
| useRenderCount | A hook to count the number of times a component has rendered. |
| useScript | A hook to dynamically load a script and handle its loading state. |
| useStorage | A generic hook for managing state with a storage mechanism (e.g., localStorage, sessionStorage). |
| useSessionStorage | A hook for managing state with sessionStorage. |
| useLocalStorage | A hook for managing state with localStorage. |
| useDarkMode | A hook to manage dark mode state and apply dark mode styling based on user preference and localStorage. |
| useTimeout | A hook to manage a timeout with set, clear, and reset functionalities. |
| useToggle | A hook to toggle a boolean value. |
| useUpdateEffect | A hook to run an effect only on updates, not on the initial mount. |
| useWindowSize | A hook to track the window size and update on resize events. |
| useStateWithHistory | A hook to manage state with an undo/redo history mechanism. |
| useStateWithValidation | A hook to manage state with validation, providing validity status. |
| useLongPress | A hook to detect long press interactions on an element. |
| useDebugInformation | A hook to provide debugging information, including render count and changed props. |
| useEventListener | A hook to add an event listener to a specified element and clean up on unmount. |
Hook Documentation
For detailed information about each hook, check out the following links:
- useFetch Documentation
- useAsync Documentation
- useArray Documentation
- useClickOutside Documentation
- useCookie Documentation
- useCopyToClipboard Documentation
- useDebounce Documentation
- useDeepCompareEffect Documentation
- useEffectOnce Documentation
- useGeolocation Documentation
- useHover Documentation
- useMediaQuery Documentation
- useOnlineStatus Documentation
- useOnScreen Documentation
- usePrevious Documentation
- useRenderCount Documentation
- useScript Documentation
- useStorage Documentation
- useSessionStorage Documentation
- useLocalStorage Documentation
- useDarkMode Documentation
- useTimeout Documentation
- useToggle Documentation
- useUpdateEffect Documentation
- useWindowSize Documentation
- useStateWithHistory Documentation
- useStateWithValidation Documentation
- useLongPress Documentation
- useDebugInformation Documentation
- useEventListener Documentation
Contributing
Contributions are welcome! Please open an issue or submit a pull request if you have suggestions or improvements.
- Fork the repository.
- Create a new branch for your changes.
- Make your changes and test them.
- Submit a pull request.
License
This project is licensed under the MIT License. Check the LICENSE file for details.