@glennreyes/react-click-outside

0.1.0-alpha.0 • Public • Published

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

License

MIT

Package Sidebar

Install

npm i @glennreyes/react-click-outside

Weekly Downloads

0

Version

0.1.0-alpha.0

License

MIT

Unpacked Size

5.54 kB

Total Files

5

Last publish

Collaborators

  • glennreyes