[Edit]

React - detect click outside component

1 contributors

2 contributions

0 discussions

0 points

Created by:

Mariam-Barron

811

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

Edit

xxxxxxxxxx
 
// 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);

Auto running

Example 2

Edit

xxxxxxxxxx
 
// 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);

Auto running

Example 3

Edit

xxxxxxxxxx
 
// 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);