useClickOutside

A React hook for detecting click events outside of an element.

Live example

Why use this library?

• it works even when some onClick handler does event.stopPropagation()
• it works with new window portals
• it does not treat click on element's portal as external clicks

Usage

const { ref, onClickCapture } = useClickOutside(callback);

The only argument to the hook is a callback function that gets invoked when a click event is detected outside of an element.

The hook returns an object with ref and onClickCapture properties that should be passed to an element.

Property | Description ---------------- | ------------ ref | A ref object created by the useRef hook with an uninitialized .current property. onClickCapture | An event handler for the click event in the capture phase.

Example code

import React, { useCallback } from 'react';
import useClickOutside from '@trans.eu/use-click-outside';

const Example = () => {
  const onClickOutside = useCallback(() => {
    console.log('Click outside');
  }, []);

  const { ref, onClickCapture } = useClickOutside(onClickOutside);

  return (
    <div ref={ref} onClickCapture={onClickCapture}>
      Element
    </div>
  );
}

Local example

git clone https://github.com/trans-eu/use-click-outside.git
cd ./use-click-outside
npm install
npm run start

and open http://localhost:8080/ in your browser