1d1cf81cf6
A design system needs a popover mecanism. In the select component, this logic is handled by downshift. We introduce a new component, responsible to open an element in a popin and close it when the user click outside of it.
19 lines
525 B
TypeScript
19 lines
525 B
TypeScript
import { RefObject, useEffect } from "react";
|
|
|
|
export const useHandleClickOutside = (
|
|
ref: RefObject<HTMLDivElement>,
|
|
onClickOutside: any
|
|
) => {
|
|
useEffect(() => {
|
|
const outsideListenerEvent = (event: MouseEvent) => {
|
|
if (!ref.current || ref.current.contains(event.target as Node)) {
|
|
return;
|
|
}
|
|
onClickOutside();
|
|
};
|
|
document.addEventListener("click", outsideListenerEvent, true);
|
|
return () =>
|
|
document.removeEventListener("click", outsideListenerEvent, true);
|
|
}, []);
|
|
};
|