Software Engineering :: Programming :: Languages :: JavaScript :: Library :: react-custom-hooks
⪼ Made with 💜 by Polyglot.
React Custom Hooks is a repository providing utility hooks that simplify React development, from handling state and async operations to media queries, geolocation, and more. Each hook streamlines specific functionality, making your code cleaner and more efficient. See the full list and details here: React Custom Hooks.
const { value, push, remove } = useArray([1, 2, 3]);
push(4); // Adds 4 to the array
const { data, error, loading } = useAsync(fetchData);
const ref = useClickOutside(() => console.log('Clicked outside!'));
const [cookie, setCookie] = useCookie("userToken", "");
const [copy] = useCopyToClipboard();
copy("Text to copy!");
const [isDarkMode, toggleDarkMode] = useDarkMode();
const debouncedValue = useDebounce(value, 500);
const debugInfo = useDebugInformation("ComponentName", props);
useDeepCompareEffect(() => { /* effect */ }, [complexDependency]);
useEffectOnce(() => { console.log("Runs only once"); });
useEventListener("scroll", handleScroll);
const { data, error } = useFetch("https://api.example.com/data");
const { coords, error } = useGeolocation();
const [hoverRef, isHovered] = useHover();
const longPress = useLongPress(() => console.log("Long pressed!"));
const isLargeScreen = useMediaQuery("(min-width: 1024px)");
const isOnline = useOnlineStatus();
const [ref, isOnScreen] = useOnScreen();
const prevValue = usePrevious(value);
const renderCount = useRenderCount();
const status = useScript("https://example.com/script.js");