react-outside-click-event

1.0.1 • Public • Published

react-outside-click-event

Travis npm package Coveralls

Installation

yarn add react-outside-click-event

Demo

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

Readme

Keywords

Package Sidebar

Install

npm i react-outside-click-event

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

5.21 kB

Total Files

4

Last publish

Collaborators

  • appwrk