@stratpoint-fe/react-onclickout/README.md

An ES6-friendly on-click-outside React component.

> **Forked from `boblauer/react-onclickout` to include React 18.x compatibility.**

# An ES6-friendly on-click-outside React component.

This is a React component that can be used to listen for clicks outside of a given component. As an example, you may need to hide a menu when a user clicks elsewhere on the page.

This component was created specifically to support ES6-style React components. If you want to use a mixin instead, I would recommend the [react-onclickoutside](https://github.com/Pomax/react-onclickoutside) mixin.

## Installation

```
npm install @stratpoint-fe/react-onclickout --save
```

## React Version Support

For React `0.14` or later, use version `2.x` of this package. For React `0.13` or earlier, use version `1.x` of this package.

## Usage

There are two ways to use this component.

### As a wrapper component

```jsx
const ClickOutHandler = require("react-onclickout");

class ExampleComponent extends React.Component {
  onClickOut(e) {
    alert("user clicked outside of the component!");
  }

  render() {
    return (
      <ClickOutHandler onClickOut={this.onClickOut}>
        <div>Click outside of me!</div>
      </ClickOutHandler>
    );
  }
}
```

### As a base component

```jsx
const ClickOutComponent = require("react-onclickout");

class ExampleComponent extends ClickOutComponent {
  onClickOut(e) {
    alert("user clicked outside of the component!");
  }

  render() {
    return <div>Click outside of me!</div>;
  }
}
```

## Ignoring Elements

There are times when you may want to ignore certain elements that were clicked outside of the target component. You can handle such a scenario by inspecting the event passed to your `onClickOut` method handler.

```jsx
const ClickOutHandler = require("react-onclickout");

class ExampleComponent extends React.Component {
  onClickOut(e) {
    if (hasClass(e.target, "ignore-me")) return;
    alert("user clicked outside of the component!");
  }

  render() {
    return (
      <ClickOutHandler onClickOut={this.onClickOut}>
        <div>Click outside of me!</div>
      </ClickOutHandler>
    );
  }
}
```

That's pretty much it. Pull requests are more than welcome!