react-outside-click-x

    1.0.0 • Public • Published

    Outside Click Handler

    A react component for handling outside clicks without using unnecessary DOM operations. Faster and more practical!

    Getting Started

    It is developed for increasing efficiency when handling outside click. It does not use unnecessary DOM operations such as contains when handling outside click.

    Installation

    npm install react-outside-click-x

    Usage

    import OutsideClickHandler from 'react-outside-click-x';
     
    function MyComponent() {
      return (
        <OutsideClickHandler
          onOutsideClick={() => {
            alert('Clicked outside!');
          }}
        >
          Hello World
        </OutsideClickHandler>
      );
    }

    Alternative Usage

    By default, the OutsideClickHandler renders a

    to wrap the subtree defined by children. It can be used alternatively without wrapping with additional div.

    import OutsideClickHandler from 'react-outside-click-x';
     
    function MyComponent() {
      return (
        <OutsideClickHandler
          onOutsideClick={() => {
            alert('Clicked outside!');
          }}
          targetElement={(ref) => { return (<MyComponent2 refHolder={ref} />) ;}}>
        />
      );
    }
    function MyComponent2(props) {
      return (
        <div ref={props.refHolder}>
          ...
        </div>
      );
    }

    Props

    onOutsideClick: PropTypes.func.isRequired

    When the user clicks outside of the given children, clickevent which is specified in onOutsideClick prop is triggered.

    children: PropTypes.node

    If children is defined, OutsideClickHandler wrap it with outer div and handles clicks outside of the given children.

    targetElement: PropTypes.func

    By default the OutsideClickHandler renders a <div /> to wrap children. Children can be given in the targetElement prop, so OutsideClickHandler does not render <div /> to wrap the children and the children is rendered without wrapping.

    closeable: PropTypes.bool

    If the closeable prop is false, outside clicks will not close given node. It is by default true so when outside clicks occur, given node is closed.

    wrapperProps: PropTypes.object

    When targetElement prop is not used, by default the OutsideClickHandler renders a <div /> to wrap children. By using wrapperProps prop, some properties can be passed to outer div such as styling.

    Contributing

    Please open an issue first to discuss the change you wish to make for major changes.

    License

    MIT

    Install

    npm i react-outside-click-x

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    14.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • azizutku