Skip to content

Instantly share code, notes, and snippets.

@hiukky
Forked from fazlurr/outsider.js
Created June 20, 2019 13:57
Show Gist options
  • Save hiukky/f7a899a9734b0e55795151f3ebfda85b to your computer and use it in GitHub Desktop.
Save hiukky/f7a899a9734b0e55795151f3ebfda85b to your computer and use it in GitHub Desktop.
React Detect Click Outside Component - https://stackoverflow.com/a/42234988
/**
* Component that alerts if you click outside of it
*/
class OutsideAlerter extends Component {
constructor(props) {
super(props);
this.setWrapperRef = this.setWrapperRef.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
/**
* Set the wrapper ref
*/
setWrapperRef(node) {
this.wrapperRef = node;
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
alert('You clicked outside of me!');
}
}
render() {
return (
<div ref={this.setWrapperRef}>
{this.props.children}
</div>
);
}
}
OutsideAlerter.propTypes = {
children: React.PropTypes.element.isRequired
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment