# react-external-click

> A react component wrapper that captures an external (outside) clicks.

Latest version **1.0.2** (published 2018-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-external-click
pnpm add react-external-click
yarn add react-external-click
bun add react-external-click
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-05-19 |
| First published | 2018-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sagiv Ben-Giat |
| Maintainers | sag1v |
| Keywords | react, click, external, event, outside, onclick |

## Links

- npm: https://www.npmjs.com/package/react-external-click
- npm.io page: https://npm.io/package/react-external-click

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.3.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.3.2

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-05-19
- 1.0.1 — 2018-05-19
- 1.0.0 — 2018-05-19

## README

# react-external-click

#### Capturing clicks outside your component.
![External clicks example](https://imageshack.com/a/img923/2173/28LySr.gif)

You can pass it a `render-prop` or `children as a function` ([more details](https://reactjs.org/docs/render-props.html)).

## Install it
```
$ npm install react-external-click
```

## Use it
### Functional stateless component: 
```
import React, { Component } from 'react';
import ExternalClick from 'react-external-click';

const Item = (isExternalClick) => (
  <div className={`item ${isExternalClick && 'external'}`}>
    {`${isExternalClick ? 'Click Me' : 'Click Outside'}`}
  </div>
);

class App extends Component {
  render() {
    return (
      <div>
        <ExternalClick render={Item} />
      </div>
    );
  }
}
```

### Statefull `class` component: 
```
import React, { Component } from 'react';
import ExternalClick from 'react-external-click';
import Menu from './Menu';

class App extends Component {
  render() {
    return (
      <div>       
        <ExternalClick>
          {
            isExternalClick => <Menu show={!isExternalClick} />
          }
        </ExternalClick>
      </div>
    );
  }
}
```

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