tusharf5/react-outclick

A React component for handling clicks outside of a component 🏆

react-outclick

React component for handling clicks outside of a component.

Install

npm install --save react-outclick
or
yarn add react-outclick

Usage

By default, clicks are detected everywhere outside your component.

import OnOutsiceClick from 'react-outclick';

function App() {
  return (
    <OnOutsiceClick
      onOutsideClick={(ev: Event) => {
        alert('You clicked outside of this component!!!');
      }}>
      Hello World
    </OnOutsiceClick>
  );
}

If a container prop is also specified, clicks are only handled if they they happen outside of your component and inside the container element.

import React from 'react';
import OnOutsiceClick from 'react-outclick';

export default function App() {
  const click = () => {
    console.log('click');
  };
  const ref = React.useRef();
  return (
    <div>
      <nav>
        <span>Clicks will not be handled here as it is outside the container</span>
      </nav>
      <main ref={ref}>
        {/** Click will be detected here  **/}
        <div className='App'>
          <h1>I am inside container</h1>
          <OnOutsiceClick container={ref} onOutsideClick={click}>
            <h2>I am inside OutsideClick component</h2>
          </OnOutsiceClick>
        </div>
      </main>
    </div>
  );
}

Props

children: PropTypes.node.isRequired

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.

onOutsideClick: PropTypes.func.isRequired

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.

container: PropTypes.func

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.

display: PropTypes.oneOf(['block', 'flex', 'inline-block', 'inline', 'contents'])

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 />.

touchEvent: PropTypes.oneOf(['touchstart' , 'touchend'])

The type of touch event to detect. By default, it is touchend.

mouseEvent: PropTypes.oneOf(['click' , 'mousedown' , 'mouseup'])

The type of mouse event to detect. By default, it is click.

License

MIT © tusharf5