React component for handling clicks outside of a component.
Install
npm install --save react-outclickoryarn add react-outclick
Usage
By default, clicks are detected everywhere outside your component.
;
If a container
prop is also specified, clicks are only handled if they they happen outside of your component and inside the container
element.
;;
Props
PropTypes.node.isRequired
children: Since 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 children
, the OnOutsiceClick
will not behave as expected.
PropTypes.func.isRequired
onOutsideClick: The 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.
PropTypes.func
container: 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'])
display: By default, the OnOutsiceClick
renders a display: block
<div />
to wrap the subtree defined by children
. If desired, the display
can be set to inline-block
, inline
, flex
, or contents
instead. There is no way not to render a wrapping <div />
.
PropTypes.oneOf(['touchstart' , 'touchend'])
touchEvent: The type of touch event to detect. By default, it is touchend
.
PropTypes.oneOf(['click' , 'mousedown' , 'mouseup'])
mouseEvent: The type of mouse event to detect. By default, it is click
.
License
MIT © tusharf5