# react-outside-click-handler

> A React component for dealing with clicks outside its subtree

Latest version **1.3.0** (published 2019-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-outside-click-handler
pnpm add react-outside-click-handler
yarn add react-outside-click-handler
bun add react-outside-click-handler
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2019-09-27 |
| First published | 2017-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-outside-click-handler) |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 36.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 611 |
| Author | Maja Wichrowska |
| Maintainers | airbnbeng, lencioni, ljharb, milesj, schleyfox, taehwanno |

## Links

- npm: https://www.npmjs.com/package/react-outside-click-handler
- Repository: https://github.com/airbnb/react-outside-click-handler
- Homepage: https://github.com/airbnb/react-outside-click-handler#readme
- Issues: https://github.com/airbnb/react-outside-click-handler/issues
- npm.io page: https://npm.io/package/react-outside-click-handler

## Dependencies (5)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [object.values](https://npm.io/package/object.values.md) ^1.1.0
- [airbnb-prop-types](https://npm.io/package/airbnb-prop-types.md) ^2.15.0
- [document.contains](https://npm.io/package/document.contains.md) ^1.0.1
- [consolidated-events](https://npm.io/package/consolidated-events.md) ^1.1.1 || ^2.0.0

## Recent versions

- 1.3.0 (latest) — 2019-09-27
- 1.2.4 — 2019-07-16
- 1.2.3 — 2019-03-10
- 1.2.2 — 2018-07-24
- 1.2.0 — 2018-06-18
- 1.1.0 — 2018-06-15
- 1.0.0 — 2018-05-30
- 0.3.0 — 2018-04-01
- 0.2.0 — 2018-04-01
- 0.1.0 — 2017-03-30

## README

# react-outside-click-handler

> A React component for handling outside clicks

## Usage

```jsx
import OutsideClickHandler from 'react-outside-click-handler';

function MyComponent() {
  return (
    <OutsideClickHandler
      onOutsideClick={() => {
        alert('You clicked outside of this component!!!');
      }}
    >
      Hello World
    </OutsideClickHandler>
  );
}
```

## Props

### children: `PropTypes.node.isRequired`

Since the `OutsideClickHandler` specifically handles clicks outside a specific subtree, `children` is expected to be defined. A consumer should also not render the `OutsideClickHandler` in the case that `children` are not defined.

*Note that if you use a `Portal` (native or `react-portal`) of any sort in the `children`, the `OutsideClickHandler` will not behave as expected.*

### onOutsideClick: `PropTypes.func.isRequired`

The `onOutsideClick` prop is also required as without it, the `OutsideClickHandler` is basically a heavy-weight `<div />`. It takes the relevant clickevent as an arg and gets triggered when the user clicks anywhere outside of the subtree generated by the DOM node.

### disabled: `PropTypes.bool`

If the `disabled` prop is true, outside clicks will not be registered. This can be utilized to temporarily disable interaction without unmounting/remounting the entire tree.

### useCapture: `PropTypes.bool`

See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture for more information on event bubbling vs. capture.

If `useCapture` is true, the event will be registered in the capturing phase and thus, propagated top-down instead of bottom-up as is the default.

### display: `PropTypes.oneOf(['block', 'flex', 'inline-block', 'inline', 'contents'])`

By default, the `OutsideClickHandler` renders a `display: block` `<div />` to wrap the subtree defined by `children`. If desired, the `display` can be set to `inline-block`, `inline`, `flex`, or `contents` instead. There is no way not to render a wrapping `<div />`.

---
_Source: https://npm.io/package/react-outside-click-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._