Open
Description
We should have a util that makes it easy to detect clicks outside an element. The hook will most likely be used in modal components.
The hook should work with elements from state and RefObjects, a callback function should be called when the element or any of it's descendants are not clicked. The hook shouldn't have any additional properties.
Function signature
function useOutsideClick<T extends Unreffable<T>>(
target: T,
callback: (this: Unref<T>, event: MouseEvent) => void
): void;
Portal example
import { useOutsideClick } from '@mediamonks/react-hooks';
import styles from './MyComponent.module.scss';
export type MyComponentProps = {
onClose(): void;
}
export const MyComponent = ensuredForwardRef<MyComponentProps, HTMLDivElement>((props, ref): ReactNode => {
useOutsideClick(ref, () => {
console.log("Element is not clicked");
});
return (
<div ref={ref} className={styles.myComponent}>My content</div>,
);
});