mirror of https://github.com/sylv/micro.git
25 lines
787 B
TypeScript
25 lines
787 B
TypeScript
import { useEffect } from 'react';
|
|
|
|
export function useOnClickOutside(ref: React.MutableRefObject<any>, handler: () => void) {
|
|
useEffect(() => {
|
|
const onClick = (event: Event) => {
|
|
if (!ref.current || ref.current.contains(event.target)) return;
|
|
handler();
|
|
};
|
|
|
|
const onKeyPress = (event: KeyboardEvent) => {
|
|
if (event.key !== 'Escape') return;
|
|
handler();
|
|
};
|
|
|
|
document.addEventListener('mousedown', onClick);
|
|
document.addEventListener('touchstart', onClick);
|
|
document.addEventListener('keydown', onKeyPress);
|
|
return () => {
|
|
document.removeEventListener('mousedown', onClick);
|
|
document.removeEventListener('touchstart', onClick);
|
|
document.removeEventListener('keydown', onKeyPress);
|
|
};
|
|
}, [ref, handler]);
|
|
}
|