@gilbarbara/hooks

Useful React hooks.

Setup

npm i @gilbarbara/hooks

Hooks

Sensors

useIntersectionObserver — Detects the visibility of an element on the viewport using the IntersectionObserver API.
useLocation — Track the browser's location.
useMeasure — Get element dimensions using the ResizeObserver API.
useMediaQuery — Detect media query changes.
useResizeObserver — Detect changes in an Element dimensions using the ResizeObserver API.
useWindowSize — Get the window dimensions. Updates on resize.

UI

useClickOutside — Execute the callback when clicking outside the target element.
useResponsive — Get responsive breakpoints.

Timers

useInterval — Execute the callback repeatedly with the specified delay.
useTimeout — Execute the callback after the specified delay.

Side-effects

useDebounce — Defer function execution until the delay has elapsed since the last invocation.
useLocalStorage — Interact with the browser localStorage API.
useScript — Create a script tag and append it to the document.body.
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.

Lifecycles

useDeepCompareEffect — Uses deep comparison on its dependencies.
useEffectOnce — Run the effect only once.
useIsFirstMount — Check if it's the first mount.
useIsMounted — Check if the component is still mounted.
useIsomorphicLayoutEffect — Returns useLayoutEffect in the client or useEffect on the server.
useLifecycles — Run the callbacks when the component mounts and unmounts, respectively.
useMount — Run the callback after the component is mounted.
useUnmount — Run the callback when the component unmounts.
useUpdateEffect — Doesn't run on mount.

State

useLocalStorageState — State hook that persists the state in localStorage.
useSetState — Returns a setState that merges object changes into the current state.
useToggle — State hook to track the value of a boolean.

Misc

useFetch — Make a request with fetch. It supports retries, backoff, and more.
useLatest — Get a ref with the most recent value.
useMergeRefs — Merge multiple refs into one.
usePrevious — Return the previous value.
useRenderCount — Log how many times the component was rendered.
useSingleton — Run the code just once before the render.
useStableValue — Get a stabilized value.
useUpdate — Returns a function that re-renders the component when called.
useWhyDidYouUpdate — Get which prop/state changes are causing a component to re-render.

License

MIT