React component for handling clicks outside of a component.
npm install --save react-outclickoryarn add react-outclick
By default, clicks are detected everywhere outside your component.
container prop is also specified, clicks are only handled if they they happen outside of your component and inside the
OnOutsiceClick specifically handles clicks outside a specific subtree,
children is expected to be defined. A consumer should also not render the
OnOutsiceClick in the case that
children are not defined.
Note that if you use a
Portal (native or
react-portal) of any sort in the
OnOutsiceClick will not behave as expected.
onOutsideClick prop is also required as without it, the
OnOutsiceClick is basically a heavy-weight
<div />. It takes the relevant clickevent as an arg and gets triggered when the user clicks anywhere outside of the subtree generated by the DOM node.
By default, this library will detect any
click event that happens outside of your react component. But sometimes, you want to
detect event inside a container and outside one of its child. For that you can pass in a container (parent) element react ref as a prop.
PropTypes.oneOf(['block', 'flex', 'inline-block', 'inline', 'contents'])
By default, the
OnOutsiceClick renders a
<div /> to wrap the subtree defined by
children. If desired, the
display can be set to
contents instead. There is no way not to render a wrapping
PropTypes.oneOf(['touchstart' , 'touchend'])
The type of touch event to detect. By default, it is
PropTypes.oneOf(['click' , 'mousedown' , 'mouseup'])
The type of mouse event to detect. By default, it is
MIT © tusharf5