react-outside-click-event

Installation

yarn add react-outside-click-event

Demo

• https://codesandbox.io/s/quirky-meadow-npb48

Usage

import HandleOutsideClick from '../../src'

export default function Demo() {

	const [divColor, setDivColor] = useState('yellow');
	return <HandleOutsideClick
		onOutsideClick={() => {
			alert("You click outside this div. Div color will be toggled.");
			setDivColor((val) => val === 'yellow' ? 'green' : 'yellow');
		}}
	>
		<div style={{
			position: 'absolute',
			width: '400px',
			height: '400px',
			display: 'flex',
			justifyContent: 'center',
			alignItems: 'center',
			fontWeight: 'bold',
			fontSize: 'larger',
			backgroundColor: divColor
		}}>Click anywhere outside this box!!</div>
	</HandleOutsideClick>
}

References

• https://reactjs.org/docs/refs-and-the-dom.html
• https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event
• https://github.com/dev-expert/react-outside-click-event