Skip to content

useOutsideClick

Hook for detecting if a click was made outside of the selected element area

Import

import useOutsideClick from '@empeek-rnd-ui/hooks/useOutsideClick';

Usage

const SomeComponent = () => {
  const ref = useRef(null);

  // this callback function will be triggered after clicking outside of an element
  const outsideClickCallback = () => {
    alert('You clicked outside of an element');
  };

  const ref = useOutsideClick<HTMLDivElement>(ref, outsideClickCallback);

  return (
    <div ref={ref}>
      Click outside of this div element will be detected by outsideClickCallback hook
    </div>
  );
}

Example

If you will click on this popup - it will be NOT CLOSED

But if you will click outside of this popup - it will be CLOSED