react-outer-click

React component and hook which detect mouse clicks outside of an element.

Usage

useOuterClick Hook (recommended)

1useOuterClick(refs, handler);

Parameters

• refs a single ref or array of refs to not be handled the user has clicked
• handler callback function to be called when the user has clicked

Example

1import { useOuterClick } from 'react-outer-click';
2
3const Example = (props) => {
4  const el = useRef(null);
5
6  useOuterClick(el, (event) => {
7    event.preventDefault();
8    console.log('Clicked outside');
9  });
10
11  return <div ref={el}>Example</div>;
12};

OuterClick Component

1<OuterClick onOuterClick={}></OuterClick>

Props

• children elements that will not be handled when clicked
• onOuterClick callback function to be called when the user has clicked

Example

1import { OuterClick } from 'react-outer-click';
2
3const Example = (props) => {
4  return (
5    <OuterClick
6      onOuterClick={() => {
7        event.preventDefault();
8        console.log('Clicked outside');
9      }}
10    >
11      Example
12    </OuterClick>
13  );
14};

:warning: Previous versions of react-outer-click allowed OuterClick to be imported as default export. This is no longer supported and has been removed.

:information_source: The OuterClick component will wrap your children with a <div> element, and any additional props will be passed down. You can change the element rendered with the as prop:

1  ...
2  <OuterClick as="span" onOuterClick={...}>
3    Example
4  </OuterClick>
5  ...

Requirements

Requires a minimum of React version 16.8.0. If you're on an older version of React, then checkout v1.