Useful React hooks.
npm i @gilbarbara/hooks
useClickOutside — Handle clicks outside a specific DOM element.
useEffectOnce — Run an effect only once.
useElementSize — Get element dimensions using the ResizeObserver API.
useFetch — Make a request with fetch.
useIntersectionObserver — Detects the visibility of an element on the viewport using the IntersectionObserver API.
useIsFirstRun — Detect if it is the first execution.
useIsMounted — Check if the component is still mounted before changing the state.
useIsomorphicLayoutEffect — Returns useLayoutEffect
in the client or useEffect
on the server.
useLatest — Get a ref with the most recent value.
useMediaQuery — Detect media query changes.
useMergeRefs — Merge multiple refs into one.
useMount — Run a function after the component is mounted.
usePrevious — Return the previous value.
useRenderCount — Log how many times the component was rendered.
useResizeObserver — Detect changes in an Element dimensions using the ResizeObserver API.
useResponsive — Get responsive breakpoints.
useScript — Create a script tag and append it to the document.body
.
useSingleton — Run the code just once before the render.
useThrottle — Return a throttled function that only invokes fn
once per every ms
.
useThrottleValue — Return a throttled value that only changes once per every ms
.
useUnmount — Run a function when the component unmounts.
useWhyDidYouUpdate — Get which prop changes are causing a component to re-render.
useWindowSize — Get the window dimensions. Updates on resize.
MIT