useClickOutside
import { RefObject, useCallback, useEffect } from "react";
export function useClickOutside(
elementRef: RefObject<HTMLElement>,
callback: (event: MouseEvent) => void,
) {
const handleClick = useCallback(
(event: MouseEvent) => {
if (
elementRef.current &&
!elementRef.current.contains(event.target as Node)
)
callback(event);
},
[callback, elementRef],
);
useEffect(() => {
addEventListener("click", handleClick);
return () => removeEventListener("click", handleClick);
}, [handleClick]);
} useIsomorphicLayoutEffect
import { useEffect, useLayoutEffect } from "react";
export const useIsomorphicLayoutEffect =
typeof window !== "undefined" ? useLayoutEffect : useEffect; usePrevious
export function usePrevious<T>(value: T) {
const prevRef = useRef<T>(undefined);
useEffect(() => {
prevRef.current = value;
}, [value]);
return prevRef.current;
}