NASA Planetary Mission

    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

    107

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • toxblh