Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


0.0.4 • Public • Published

react click outside component

React component for handling clicks outside of a component.


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


By default, clicks are detected everywhere outside your component.

import OnOutsiceClick from 'react-outclick';
function App() {
  return (
      onOutsideClick={(ev: Event) => {
        alert('You clicked outside of this component!!!');
      Hello World

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 = () => {
  const ref = React.useRef();
  return (
        <span>Clicks will not be handled here as it is outside the container</span>
      <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>


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.


MIT © tusharf5


npm i react-outclick

DownloadsWeekly Downloads






Unpacked Size

19.2 kB

Total Files


Last publish


  • avatar