react-outside-click-listener

Lightweight React component that detects clicks outside its children. Useful for dropdowns, modals, tooltips, and other overlays.

Install

yarn add react-outside-click-listener
# or
npm install react-outside-click-listener

Usage

import { OutsideClickListener } from 'react-outside-click-listener';

function Dropdown(): React.JSX.Element {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <button type="button" onClick={() => setOpen(true)}>Open</button>
      <OutsideClickListener
        disabled={!open}
        onOutsideClick={() => setOpen(false)}
      >
        {open ? <div>Dropdown content</div> : <span />}
      </OutsideClickListener>
    </div>
  );
}

Props

Prop	Type	Description
onOutsideClick	(event: Event) => void	Called when a click outside is detected
disabled?	boolean	Disable the listener (useful when the dropdown is closed)
events?	(keyof GlobalEventHandlersEventMap)[]	Events to listen for. Default: ['mousedown', 'touchstart']
ignore?	HtmlTagSelectorMap | ((node: Element) => boolean) | string	Elements to ignore (CSS selector, tag map, or callback)
topNode?	RefObject<Element> | Element | string | null	Top parent node boundary for click detection
ignoreTopNode?	RefObject<Element> | Element | string | null	Top boundary for ignore matching
stopPropagation?	boolean	Stop event propagation on outside click
windowBlurAsOutsideClick?	boolean	Treat window blur as outside click (useful in iframes)
children	ReactElement<RefAttributes<Node>>	Single child that accepts a ref

Advanced

Ignore elements by CSS selector

<OutsideClickListener
  ignore=".tooltip, .popover"
  onOutsideClick={handleClose}
>
  <Menu />
</OutsideClickListener>

Scope to a top node

const containerRef = React.useRef<HTMLDivElement>(null);

<div ref={containerRef}>
  <OutsideClickListener
    topNode={containerRef}
    onOutsideClick={handleClose}
  >
    <Popover />
  </OutsideClickListener>
</div>

License

MIT

Repository

https://github.com/vlazh/react-outside-click-listener