Usage no npm install needed!

<script type="module">
  import glennreyesReactClickOutside from 'https://cdn.skypack.dev/@glennreyes/react-click-outside';
</script>

README

React ClickOutside

🐭 Handles clicks outside of a component.

yarn add @glennreyes/react-click-outside

<ClickOutside onClickOutside={() => closeMenu()}>
  <Menu />
</ClickOutside>

This will wrap the children with a div container.

To use a custom container, you can use the component with a render prop:

<ClickOutside onClickOutside={() => closeMenu()}>
  {({ containerRef }) => <Menu innerRef={containerRef} />}
</ClickOutside>

To just discard the div container, you can do following:

<ClickOutside onClickOutside={() => closeMenu()}>
  {() => <Menu />}
</ClickOutside>

MIT