react-fast-hooks

<h1 align="center"> <a href="https://jpranays.github.io/react-fast-hooks/">react-fast-hooks<a> </h1> <p align="center"> <a href="https://github.com/jpranays/react-fast-hooks"><img src="https://img.shields.io/badge/-GitHub-323232?style=flat&logo=github&logoColor=white"/></a> <a href="https://npmjs.org/package/react-fast-hooks"><img src="https://img.shields.io/badge/-NPM-bb2222?style=flat&logo=npm"/></a> <a href="https://packagephobia.com/result?p=react-fast-hooks"><img src="https://packagephobia.com/badge?p=react-fast-hooks" alt="Install Size"/></a> <a href="https://npmcharts.com/compare/react-fast-hooks?minimal=true"><img src="https://img.shields.io/npm/dw/react-fast-hooks.svg?label=Downloads" alt="NPM Downloads"/></a> <a href="https://github.com/jpranays/react-fast-hooks/blob/master/LICENSE"><img src="https://badgen.net/badge/License/MIT/blue" alt="License"/></a> <a href="https://bundlephobia.com/result?p=react-fast-hooks"><img src="https://img.shields.io/bundlephobia/minzip/react-fast-hooks" alt="NPM Bundle Size"/></a> <a href="https://www.npmjs.com/package/react-fast-hooks/v/latest"><img src="https://flat.badgen.net/npm/types/react-fast-hooks/" alt="Types"/></a> <a href="https://bundlephobia.com/result?p=react-fast-hooks"><img src="https://flat.badgen.net/bundlephobia/tree-shaking/react-fast-hooks" alt="Tree Shaking"/></a> <a href="https://github.com/jpranays/react-fast-hooks/actions/workflows/deploy.yml"><img src="https://img.shields.io/badge/Build%20Passing-007ec6?style=flat&logo=github" alt="Build Passing"/></a> <a href="https://jpranays.github.io/react-fast-hooks/"><img src="https://img.shields.io/badge/Docs-blue" alt="DOCS"></a> <img src="https://img.shields.io/badge/maintained-yes-blue" alt="maintained - yes"> <a href="https://pages.github.com/" title="Go to GitHub Pages homepage"><img src="https://img.shields.io/badge/Hosted_with-GitHub_Pages-blue?logo=github&logoColor=white" alt="Hosted with GH Pages"></a> <a href="https://github.com/features/actions" title="Go to GitHub Actions homepage"><img src="https://img.shields.io/badge/CI-GitHub_Actions-blue?logo=github-actions&logoColor=white" alt="Made with GH Actions"> <a href="https://security.snyk.io/package/npm/react-fast-hooks"><img src="https://img.shields.io/badge/Synk_Security-monitored-8f49c0?logo=snyk" alt="Synk Security - monitored"></a> <a href="https://cdn.jsdelivr.net/npm/react-fast-hooks@1.1.1/dist/index.esm.min.js"><img src="https://img.shields.io/badge/jsDelivr-1.1.1-ff5627?logo=jsdelivr" alt="jsDelivr - 1.1.1"></a> </a> </p> <hr/> <p align="center">These hooks aim to simplify state management, side effects, and other common functionalities in React applications, improving both productivity and code quality.</p> ## Features 🚀 **Lightweight and Fast** - Designed to be minimal in size, ensuring your application remains performant and fast. 🌐 **SSR-Friendly** - Built with Server-Side Rendering (SSR) compatibility, making it perfect for Next.js. 📝 **Typed with TypeScript** - Full TypeScript support, including comprehensive type definitions. 🌲 **Tree Shaking Support** - Optimized for tree shaking, ensuring only the code you use is included in your final bundle. 🌍 **Cross-Browser Compatibility** - Ensures consistent behavior across all major browsers. 🔧 **Ease of Use** - Designed with simplicity and ease of integration in mind. ## Installation ```bash npm install react-fast-hooks ``` ## Documentation For more detailed documentation and live code editor visit the [website](https://jpranays.github.io/react-fast-hooks/). ## Hooks Available - [useBattery](https://jpranays.github.io/react-fast-hooks/docs/hooks/useBattery) - A hook to get the battery status of the device. - [useClickOutside](https://jpranays.github.io/react-fast-hooks/docs/hooks/useClickOutside) - A hook to detect clicks outside a specified element. - [useClipboard](https://jpranays.github.io/react-fast-hooks/docs/hooks/useClipboard) - A hook to copy text to the clipboard. - [useCookie](https://jpranays.github.io/react-fast-hooks/docs/hooks/useCookie) - A hook to manage browser cookies. - [useDebounce](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDebounce) - A hook to debounce a value. - [useDebouncedCallback](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDebouncedCallback) - A hook to debounce a callback. - [useDeviceOrientation](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDeviceOrientation) - A hook to get the device orientation. - [useDimensions](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDimensions) - A hook to get the dimensions of an element. - [useEventListener](https://jpranays.github.io/react-fast-hooks/docs/hooks/useEventListener) - A hook to add an event listener to a target. - [useFavicon](https://jpranays.github.io/react-fast-hooks/docs/hooks/useFavicon) - A hook to change the favicon of the page. - [useFetch](https://jpranays.github.io/react-fast-hooks/docs/hooks/useFetch) - A hook to fetch data. - [useFocusBlur](https://jpranays.github.io/react-fast-hooks/docs/hooks/useFocusBlur) - A hook to detect focus and blur events. - [useGeolocation](https://jpranays.github.io/react-fast-hooks/docs/hooks/useGeolocation) - A hook to get the geolocation of the device. - [useHistory](https://jpranays.github.io/react-fast-hooks/docs/hooks/useHistory) - A hook to manage the browser history. - [useHover](https://jpranays.github.io/react-fast-hooks/docs/hooks/useHover) - A hook to detect hover events. - [useIdle](https://jpranays.github.io/react-fast-hooks/docs/hooks/useIdle) - A hook to detect when the user is idle. - [useIntersectionObserver](https://jpranays.github.io/react-fast-hooks/docs/hooks/useIntersectionObserver) - A hook to observe an element's intersection with the viewport. - [useKeyCombo](https://jpranays.github.io/react-fast-hooks/docs/hooks/useKeyCombo) - A hook to detect key combinations. - [useKeyPress](https://jpranays.github.io/react-fast-hooks/docs/hooks/useKeyPress) - A hook to detect key presses. - [useLocalStorage](https://jpranays.github.io/react-fast-hooks/docs/hooks/useLocalStorage) - A hook to manage local storage. - [useLongPress](https://jpranays.github.io/react-fast-hooks/docs/hooks/useLongPress) - A hook to detect long presses. - [useMediaQuery](https://jpranays.github.io/react-fast-hooks/docs/hooks/useMediaQuery) - A hook to detect media queries. - [useMouse](https://jpranays.github.io/react-fast-hooks/docs/hooks/useMouse) - A hook to get the mouse position. - [useMutationObserver](https://jpranays.github.io/react-fast-hooks/docs/hooks/useMutationObserver) - A hook to observe mutations on an element. - [useNotification](https://jpranays.github.io/react-fast-hooks/docs/hooks/useNotification) - A hook to show notifications. - [useOnlineStatus](https://jpranays.github.io/react-fast-hooks/docs/hooks/useOnlineStatus) - A hook to detect online status. - [usePreferredLanguage](https://jpranays.github.io/react-fast-hooks/docs/hooks/usePreferredLanguage) - A hook to get the preferred language of the user. - [usePrevious](https://jpranays.github.io/react-fast-hooks/docs/hooks/usePrevious) - A hook to get the previous value of a state. - [useRandomColor](https://jpranays.github.io/react-fast-hooks/docs/hooks/useRandomColor) - A hook to generate a random color. - [useScript](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScript) - A hook to load an external script. - [useScrollIntoPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScrollIntoPosition) - A hook to scroll an element into view. - [useScrollLock](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScrollLock) - A hook to lock scrolling. - [useScrollPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScrollPosition) - A hook to get the scroll position. - [useSessionStorage](https://jpranays.github.io/react-fast-hooks/docs/hooks/useSessionStorage) - A hook to manage session storage. - [useSound](https://jpranays.github.io/react-fast-hooks/docs/hooks/useSound) - A hook to play sounds. - [useStopwatch](https://jpranays.github.io/react-fast-hooks/docs/hooks/useStopwatch) - A hook to create a stopwatch. - [useSystemTheme](https://jpranays.github.io/react-fast-hooks/docs/hooks/useSystemTheme) - A hook to get the system theme. - [useTitle](https://jpranays.github.io/react-fast-hooks/docs/hooks/useTitle) - A hook to set the document title. - [useTouch](https://jpranays.github.io/react-fast-hooks/docs/hooks/useTouch) - A hook to detect touch events. - [useTouchSwipe](https://jpranays.github.io/react-fast-hooks/docs/hooks/useTouchSwipe) - A hook to detect touch swipe events. - [useUpdateEffect](https://jpranays.github.io/react-fast-hooks/docs/hooks/useUpdateEffect) - A hook to run an effect only on updates. - [useVibration](https://jpranays.github.io/react-fast-hooks/docs/hooks/useVibration) - A hook to vibrate the device. - [useWindowFocus](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowFocus) - A hook to detect window focus. - [useWindowScrollIntoPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowScrollIntoPosition) - A hook to scroll the window to a position. - [useWindowScrollPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowScrollPosition) - A hook to get the window scroll position. - [useWindowSize](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowSize) - A hook to get the window size. - [useWindowTouchSwipe](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowTouchSwipe) - A hook to detect window touch swipe events. ## Contributing Contribution guidelines [coming soon]().