use-click-outside.md

useClickOutside

Execute a side-effect when the pointer clicks outside a list of given elements or element refs.

Examples

const ref = useRef<HTMLDivElement>(null);

useClickOutside(ref, () => {
  console.log('ref was *not* clicked!');
}, [/* effect dependencies */]);

return <div ref={ref}>yolo</div>

useClickOutside(window.getElementById('carpe-diem'), () => {
  console.log('element was *not* clicked!');
}, [/* effect dependencies */]);

// Somewhere in the DOM...
<div id="carpe-diem">yolo</div>