The awesome-react-handy-hooks package is a collection of handy React hooks that provide additional functionality and simplify common tasks in React applications. These hooks are designed to enhance productivity and improve code readability by abstracting complex logic into reusable and composable units. With awesome-react-handy-hooks, developers can easily handle state management, side effects, and more, allowing them to build robust and efficient React applications with ease.
You can install the package using npm:
$ npm install awesome-react-handy-hooks- Hooks
- useCounter
- useToggle
- useDialog
- useClickInside
- useClickOutside
- useHover
- useFocus
- useLocalStorage
- useMediaQuery
- useMousePosition
- useCopyToClipboard
- useDebounce
- useThrottle
- usePrevious
- useMount
- useUnmount
- useUpdateEffect
- useEventListener
- useWindowSize
- useOnline
- useScript
- useStyle
- useTitle
- useFavicon
- useFetch
- useLongPress
- useKeyPress
- useScroll
- useBase64Encode
- useBase64Decode
- useDeviceMotion
- useDeviceOrientation
- useGeolocation
- useIdle
- useIntersectionObserver
- usePageLeave
The useCounter hook is used to manage a counter state and its functions to increment and decrement it.
Usage:
const { count, increment, decrement } = useCounter(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);The useToggle hook is used to manage a toggle state and its function to change it.
Usage:
const { isToggled, toggle } = useToggle();
return (
<div>
<p>Toggle: {isToggled ? "On" : "Off"}</p>
<button onClick={toggle}>Toggle</button>
</div>
);The useDialog hook is used to manage a dialog state and its functions to open and close it.
Usage:
const { isOpen, open, close } = useDialog();
return (
<div>
<button onClick={open}>Open Dialog</button>
{isOpen && (
<div>
<p>This is a dialog</p>
<button onClick={close}>Close Dialog</button>
</div>
)}
</div>
);The useClickOutside hook is used to check if the click is outside an element and call a function when it is.
Usage:
const elementRef = useRef(null);
useClickOutside(ref, () => {
console.log("call when the click is outside the elementRef");
});
return <div ref={elementRef}>My Component</div>;The useHover hook is used to check if the hover is inside an element and call a function when it is.
Usage:
const elementRef = useRef(null);
useHover(ref, () => {
console.log("call when the hover is inside the elementRef");
});
return <div ref={elementRef}>My Component</div>;The useFocus hook is used to check if the focus is inside an element and call a function when it is.
Usage:
const elementRef = useRef(null);
useFocus(ref, () => {
console.log("call when the focus is inside the elementRef");
});
return <input ref={elementRef} value="Hello react" />;The useMediaQuery hook is used to check if a media query matches.
Usage:
const isMobile = useMediaQuery("(max-width: 768px)");The useMousePosition hook is used to get the current mouse position.
Usage:
const { x, y } = useMousePosition();The useCopyToClipboard hook is used to copy a string to the clipboard.
Usage:
const { copied, copyToClipboard } = useCopyToClipboard();The useDebounce hook is used to debounce a value.
Usage:
const debouncedValue = useDebounce(value, 1000);The useThrottle hook is used to throttle a value.
Usage:
const throttledValue = useThrottle(value, 1000);The useMount hook is used to execute a function on mount.
Usage:
const callOnMount = () => {
console.log("Call on mount");
};
useMount(callOnMount);The useUnmount hook is used to execute a function on unmount.
Usage:
const callOnUnmount = () => {
console.log("Call on unmount");
};
useUnmount(callOnUnmount);The useUpdateEffect hook is used to execute a function on update when the dependencies changes.
Usage:
useUpdateEffect(() => {
console.log("Component updated");
}, [dep1, dep2]);The useEventListener hook is used to listen for events on an element and call a function when the event is triggered.
Usage:
useEventListener(
"click",
() => {
console.log("The document was clicked");
},
document
);The useWindowSize hook is used to get the width and height of the window and update it on resize.
Usage:
const size = useWindowSize();The useOnline hook is used to check if the user is online.
Usage:
const online = useOnline();The useScript hook is used to load a script and manage its loading status.
Usage:
const loading = useScript("https://example.com/script.js");The useStyle hook is used to load a stylesheet and manage its loading status.
Usage:
const loading = useStyle("https://example.com/style.css");The useTitle hook is used to change the title of the document.
Usage:
useTitle("New Title");The useFetch hook is used to fetch data from an API endpoint and manage the loading, data, and error states.
Usage:
const { data, loading, error } = useFetch("https://example.com/api");The useLongPress hook is used to execute a function on long press.
Usage:
const longPressEvent = useLongPress(() => {
console.log("Long press event");
}, 300);
return (
<div>
<button {...longPressEvent}>Press and hold me</button>
</div>
);The useKeyPress hook is used to detect if a key is pressed.
Usage:
const isKeyPressed = useKeyPress("a");The useScroll hook is used to get the scroll position.
Usage:
const { x, y } = useScroll();The useBase64Encode hook is used to encode a string to base64.
Usage:
const { encoded, encode } = useBase64Encode();The useBase64Decode hook is used to decode a base64 string.
Usage:
const { decoded, decode } = useBase64Decode();The useBase64Decode hook is used to decode a base64 string.
Usage:
const { decoded, decode } = useBase64Decode();The useDeviceMotion hook is used to get the device motion.
Usage:
const { x, y, z } = useDeviceMotion();The useGeolocation hook is used to get the geolocation of the user.
Usage:
const { latitude, longitude } = useGeolocation();The useIdle hook is used to check if the user is idle.
Usage:
const isIdle = useIdle(1000);The useIntersectionObserver hook is used to observe an element's intersection details.
Usage:
const elementRef = useRef(null);
const options = {
root: null,
rootMargin: "0px",
threshold: 1.0,
};
const intersection = useIntersectionObserver(elementRef, options);The usePageLeave hook is used to execute a function when the user leaves the page.
Usage:
usePageLeave(() => {
console.log("The user left the page");
});