import * as React from 'react' ; interface Props { children : React . ReactNode ; exception ? : Node ; onClick ( ) : void ; } export class OutsideAlerter extends React . Component < Props > { public wrapperRef : any ; constructor ( props ) { super ( props ) ; this . wrapperRef = ( React as any ) . createRef ( ) ; } public componentDidMount ( ) { document . addEventListener ( 'mousedown' , this . handleClickOutside ) ; } public componentWillUnmount ( ) { document . removeEventListener ( 'mousedown' , this . handleClickOutside ) ; } public handleClickOutside = ( event ) => { if ( this . wrapperRef && ! this . wrapperRef . current . contains ( event . target ) && event . target !== this . props . exception ) { this . props . onClick ( ) ; } } ; public render ( ) { return < div ref = { this . wrapperRef } > { this . props . children } < /div>; } }