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");
});