Skip to content

Instantly share code, notes, and snippets.

@JakeSidSmith
Created April 24, 2019 12:58
Show Gist options
  • Save JakeSidSmith/f1027a0c342e318999800a763288f78f to your computer and use it in GitHub Desktop.
Save JakeSidSmith/f1027a0c342e318999800a763288f78f to your computer and use it in GitHub Desktop.
React higher order component to add "click outside" events to elements
import React, { MouseEvent, PureComponent } from 'react';
interface Props {
onClickOutside: () => any;
}
// @TODO: element should be constrained to 'keyof ReactHTML' but this causes some crazy memory leak
export const withClickOutside = (element: string) => {
const Element = element;
// Props should include those from ReactHTML props / attributes
class WithClickOutside extends PureComponent<Props> {
private clicked: boolean = false;
public componentDidMount() {
window.addEventListener('click', this.windowClick);
}
public componentWillUnmount() {
window.removeEventListener('click', this.windowClick);
}
public render() {
const { children } = this.props;
return (
<Element onClick={this.onClick}>
{children}
</Element>
);
}
private onClick = (event: MouseEvent) => {
this.clicked = true;
if (this.props.onClick) {
this.props.onClick(event);
}
}
private windowClick = () => {
if (!this.clicked) {
this.props.onClickOutside();
}
this.clicked = false;
}
}
return WithClickOutside;
};
export const ClickOutsideDiv = withClickOutside('div');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment