So instead of a simple outside-click to an element, if we click outside of both element A and element B (e.g., click(a) /* $b's callback doesn't get called /; click(b) / $a's callback doesn't get called /; click(c) / the callback gets called */). Not necessarily 2 elements, but any element with the same "name".

Best example is an autocomplete input.

Initial Idea

<ClickOutside name="x" onClickOutside={this.handle} />
<ClickOutside name="x" onClickOutside={this.handle} />

Another Idea

<ClickOutsideOf of="x" onClickOutside={this.handle}>
  <ClickOutside name="x"><button /></ClickOutside>
  <ClickOutside name="x"><button /></ClickOutside>
</ClickOutside

• I don't have a better API yet. Posting this up maybe someone could come up with one.
• If it's outside the scope of this project (yea it does complicate things a bit), umm feel free to close haha 👌 . Thanks.

TypeError: Cannot read property 'getInstance' of null

var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
};

is this normal?

<ClickOutside onClickOutside={::this.close}> isn't a bit redundant?

Why not <ClickOutside onClick={::this.close}>?

An older version of this project is published on npm here https://www.npmjs.com/package/react-click-outside-component by @aesopwolf but it uses deprecated version of PropTypes. This repo now has 1.1.1 in the package.json (but on in releases). Could we have the latest version of this on npm please?

ERROR in ./~/react-click-outside/build/index.js
Module not found: Error: Can't resolve 'react-transform-hmr' in '/Users/mmmeff/code/reactui/node_modules/react-click-outside/build'
resolve 'react-transform-hmr' in '/Users/mmmeff/code/reactui/node_modules/react-click-outside/build'
  Parsed request is a module
  using description file: /Users/mmmeff/code/reactui/node_modules/react-click-outside/package.json (relative path: ./build)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/mmmeff/code/reactui/node_modules/react-click-outside/package.json (relative path: ./build)
    resolve as module

Happened after updating to 1.1.0

I'm wishing to wrap the target of this library in something other than a div. I went ahead and made some changes locally to get this type signature:

<ClickOutside onClickOutside={handleClickOff} wrappingElement={'span'}>

Is this something that you would want back upstream?

Hi TJ,

Could you release what's on master? It makes the module compatible with react 16.

Many thanks!

Use it inside a view can block all onChange even on checkboxes.

I will get an error when using ::
does it mean bind(this)?
Is it an standard react syntax?

easier than installing via git and now semver could work

Use case:

• You have a menu A.
• You have a callback X, which is to be triggered if a click is detected outside A (using this library).
• Somewhere on the page, you have an iFrame B.
• When A is visible, and you click anywhere on the page, X gets invoked (working correct).
• When A is visible, and you click anywhere over B, X doesn't get invoked (bug).

version: 3.0.0

In some cases, I want to define a set of elements to ignore when clicked (which will not trigger onClickOutside)

maybe as an option.

idea is if you're on mobile and you click outside an open dropdown, the dropdown should close ASAP.

Hello @tj I notice that you don't maintain this module anymore, I would love to maintain it :). Would you mind handing over control?

i'll make a PR eventually. i just can't do it in the github editor:

import React, { Component, PropTypes } from 'react'

export default class ClickOutside extends Component {
  static propTypes = {
    onClickOutside: PropTypes.func.isRequired
  };

  render() {
    const { children } = this.props
    return <div ref='container'>{children}</div>
  }

  componentDidMount() {
    document.addEventListener('click', this.handle, true)
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handle, true)
  }

  handle = e => {
    const { onClickOutside } = this.props
    const el = this.refs.container
    if (!el.contains(e.target)) onClickOutside(e)
  }
}