Have ideas to improve npm?Join in the discussion! »

react-hoc-outside-click

1.1.0 • Public • Published

React HOC OutsideClick

A Higher Order Component wrapper to provide click outside functionality to the components

Latest Stable Version License NPM Downloads

How to use

  1. Import clickOutside component
  2. Wrap your main component with function the clickOutside
  3. 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

Install

npm i react-hoc-outside-click

DownloadsWeekly Downloads

186

Version

1.1.0

License

MIT

Last publish

Collaborators

  • avatar