react-hoc-outside-click
v1.1.0
Published
React HOC OutsideClick
Downloads
11
Maintainers
Readme
React HOC OutsideClick
A Higher Order Component wrapper to provide click outside functionality to the components
How to use
- Import
clickOutside
component - Wrap your main component with function the
clickOutside
- Provide an
onClickOutside
callback.
Example
import React from 'react';
/* Any component, which will be set onClickOutside */
import Modal from 'modal/Modal';
import clickOutside from 'react-hoc-outside-click';
class AnyComponent extends Component {
state = {
isOpened: false
}
handleClickOutside() {
this.setState({ isOpened: false });
},
render() {
const wrapClickDiv = clickOutside(Modal);
return (
<wrapClickDiv onClickOutside={this.handleClickOutside}>
Any content
</wrapClickDiv>
)
},
});
export default AnyComponent;
Options:
| Name | Description | Required |
| ------------- |-------------| --- |
| onClickOutside | function that is called when a click happened outside of the component | yes |
License
MIT