react-outer-click

react-outer-click

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

Usage

useOuterClick Hook (recommended)

useOuterClick(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

import { useOuterClick } from 'react-outer-click';

const Example = (props) => {
  const el = useRef(null);

  useOuterClick(el, () => {
    console.log('Clicked outside');
  });

  return <div ref={el}>Example</div>;
};

OuterClick Component

<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

import { OuterClick } from 'react-outer-click';

const Example = (props) => {
  return (
    <OuterClick
      onOuterClick={() => {
        console.log('Clicked outside');
      }}
    >
      Example
    </OuterClick>
  );
};

: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:

  ...
  <OuterClick as="span" onOuterClick={...}>
    Example
  </OuterClick>
  ...

Requirements

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

Changelog

v3.4.0 - 2020-10-25

Added

• Added type checking of refs parameter in useOuterClick hook.

Changed

• Updated handler parameter of useOuterClick hook to allow null.
• Updated propTypes to only be defined in non-production environments.
• Updated React import to avoid using default import.

Removed

• Removed defaultProps in favour of default values in object destructuring.