React - detect click outside component

In this article, we would like to show you how to detect a click outside component in React.

Below are three sample codes, ready to run.

Example 1

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => {
  const [clickedOutside, setClickedOutside] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const handleOutsideClick = e => {
      setClickedOutside(ref.current !== e.target);
    };
    window.addEventListener('click', handleOutsideClick);
    return () => window.removeEventListener('click', handleOutsideClick);
  }, []);

  return (
    <div >
      <button ref={ref}>
        {`clickedOutside: ${clickedOutside}`}
      </button>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Example 2

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from "react";
// import ReactDOM from "react-dom";

const Component = ({ name, checked, onChange }) => {
  const ref = React.useRef();
  React.useEffect(() => {
    let clicked = false;
    const handleOutsideClick = () => {
      if (clicked) {
        clicked = false;
        return;
      }
      console.log('Outside click...');
    };
    const handleInsideClick = () => {
      clicked = true;
      console.log('Inside click...');
    };
    const component = ref.current;
    window.addEventListener('click', handleOutsideClick)
    if (component) {
      component.addEventListener('click', handleInsideClick);
    }
    return () => {
      window.addEventListener('click', handleOutsideClick);
      if (component) {
        component.addEventListener('click', handleInsideClick);
      }
    };
  }, []);
  return (
    <div ref={ref} style={{ background: 'orange' }}>
      Component body...
    </div>
  );
};

const App = () => {
  return (
    <Component />
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Example 3

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const useHandleOutsideClick = (onOutsideClick, onInsideClick) => {
  const ref = React.useRef();
  React.useEffect(() => {
    let clicked = false;
    const handleOutsideClick = (e) => {
      if (clicked) {
        clicked = false;
        return;
      }
      if (onOutsideClick) {
        onOutsideClick(e);
      }
    };
    const handleInsideClick = (e) => {
      clicked = true;
      if (onInsideClick) {
        onInsideClick(e);
      }
    };
    const component = ref.current;
    window.addEventListener('click', handleOutsideClick)
    if (component) {
      component.addEventListener('click', handleInsideClick);
    }
    return () => {
      window.addEventListener('click', handleOutsideClick);
      if (component) {
        component.addEventListener('click', handleInsideClick);
      }
    };
  }, []);
  return ref;
};

// Usage example:

const Component = ({ name, checked, onChange }) => {
  const handleOutsideClick = () => {
    console.log('Outside click...');
  };
  const handleInsideClick = () => {
    console.log('Inside click...');
  };
  const ref = useHandleOutsideClick(handleOutsideClick, handleInsideClick);
  return (
    <div ref={ref} style={{ background: 'orange' }}>
      Component body...
    </div>
  );
};

const App = () => {
  return (
    <Component />
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

See also

1. React - detect click outside component hook (works with nested elements)

References

1. addEventListener - MDN