36 lines
934 B
TypeScript
36 lines
934 B
TypeScript
|
import React, { useRef, useEffect, ReactNode, RefObject } from "react";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
children: ReactNode;
|
||
|
|
onClickOutside: Function;
|
||
|
|
}
|
||
|
|
|
||
|
|
function useOutsideAlerter(
|
||
|
|
ref: RefObject<HTMLElement>,
|
||
|
|
onClickOutside: Function
|
||
|
|
) {
|
||
|
|
useEffect(() => {
|
||
|
|
function handleClickOutside(event: Event) {
|
||
|
|
if (
|
||
|
|
ref.current &&
|
||
|
|
!ref.current.contains(event.target as HTMLInputElement)
|
||
|
|
) {
|
||
|
|
onClickOutside();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Bind the event listener
|
||
|
|
document.addEventListener("mousedown", handleClickOutside);
|
||
|
|
return () => {
|
||
|
|
// Unbind the event listener on clean up
|
||
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
||
|
|
};
|
||
|
|
}, [ref, onClickOutside]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function OutsideAlerter({ children, onClickOutside }: Props) {
|
||
|
|
const wrapperRef = useRef(null);
|
||
|
|
useOutsideAlerter(wrapperRef, onClickOutside);
|
||
|
|
|
||
|
|
return <div ref={wrapperRef}>{children}</div>;
|
||
|
|
}
|