This project is archived. Use useClickAway instead. Thank you!

React ClickOutside

🐭 Handles clicks outside of a component.

Installation

yarn add @glennreyes/react-click-outside

Usage

Simple example

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

This will wrap the children with a div container.

Custom 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>

Inspired by

• tj/react-click-outside

License

MIT