huridocs/uwazi

View on GitHub
app/react/utils/useOnClickOutsideElementHook.ts

Summary

Maintainability
A
0 mins
Test Coverage
A
100%
import { RefObject, useEffect } from 'react';

export function useOnClickOutsideElement<T extends HTMLElement>(
  ref: RefObject<T>,
  cb: (event: MouseEvent) => void
) {
  useEffect(() => {
    const onClickHandler = (event: MouseEvent) => {
      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
        return;
      }

      cb(event);
    };

    document.addEventListener('click', onClickHandler);
    return () => {
      document.removeEventListener('click', onClickHandler);
    };
  }, [ref, cb]);
}