useDismiss

See source on Github 

Executes callback when a keydown event involving the Escape key or a pointerdown event occurs outside of passed ref element. Useful when creating components, like dialogs, popovers, dropdowns, etc., that should be dismissed when the user interacts outside of them.

• @param ref - Element reference to base events on.
• @param callback - Callback to execute when a keydown or pointerdown event occurs.
• @param options - Configurable options
• @param options.when - Whether dismissal listeners are enabled.
• @param options.keyboard - Whether Escape-key dismissal is enabled.
• @param options.pointer - Pointer types that may trigger dismissal.

Example

const ref = useRef<HTMLDivElement>(null)
const [isOpen, setIsOpen] = useState(false)
 
useDismiss(ref, () => setIsOpen(false), { when: isOpen })
 
return (
  <>
    <button type="button" onClick={() => setIsOpen(true)}>Open</button>
    {isOpen && (<div ref={ref}>Content</div>)}
  </>
)