@kiwicom/orbit-components/src/ClickOutside/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

// @flow
import * as React from "react";
import styled from "styled-components";

import type { Props } from "./index";

const Inner = styled.div`
  width: 100%;
`;

class ClickOutside extends React.PureComponent<Props> {
  componentDidMount() {
    document.addEventListener("click", this.handleClickOutside, true);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.handleClickOutside, true);
  }

  handleClickOutside = (ev: MouseEvent) => {
    const { onClickOutside } = this.props;

    if (
      onClickOutside &&
      this.node &&
      ev.target instanceof Node &&
      !this.node.contains(ev.target)
    ) {
      onClickOutside(ev);
    }
  };

  node: ?HTMLDivElement;

  render() {
    const { children } = this.props;

    return (
      <Inner
        innerRef={node => {
          this.node = node;
        }}
      >
        {children}
      </Inner>
    );
  }
}

export default ClickOutside;