Close Dropdown Menu on Click Outside

1.menu {
2  position: relative;
3  float: left;
4}
5.dropdown {
6  position: absolute;
7  width: 200px;
8  border: 1px solid #ccc;
9}
10

1// In `App.js`
2import { useState, useEffect, useRef } from "react";
3import "./App.css";
4
5function App() {
6  // Create a ref for the element to detect outside clicks
7  const ref = useRef();
8  // Our dropdown's state
9  const [isOpenDropdown, setOpenDropdown] = useState(false);
10  // Call hook passing in the ref and a function to call on outside click
11  useEffect(() => {
12    const handleClickOutside = (event) => {
13      // Do nothing if clicking ref's element or descendent elements
14      if (ref && !ref.current.contains(event.target) && isOpenDropdown) {
15        setOpenDropdown(false);
16      }
17    };
18    // When user click any place in document
19    document.addEventListener("click", handleClickOutside);
20    return () => {
21      // Clean it on rerender
22      document.removeEventListener("click", handleClickOutside);
23    };
24  }, [ref, isOpenDropdown, setOpenDropdown]);
25  return (
26    <div ref={ref} className="menu">
27      <button
28        type="button"
29        onClick={(e) => {
30          e.preventDefault();
31          setOpenDropdown(!isOpenDropdown);
32        }}
33      >
34        Open menu
35      </button>
36      {isOpenDropdown && (
37        <div className="dropdown">
38          <ul>
39            <li>Copy</li>
40            <li>Paste</li>
41            <li>Delete</li>
42          </ul>
43        </div>
44      )}
45    </div>
46  );
47}
48
49export default App;
50

1// In `App.js`
2import { Component, createRef } from "react";
3import "./App.css";
4
5class App extends Component {
6  // Create a ref for the element to detect outside clicks
7  ref = createRef();
8  // Our dropdown's state
9  state = {
10    isOpenDropdown: false,
11  };
12
13  constructor(props) {
14    super(props);
15    this.handleClickOutside = this.handleClickOutside.bind(this);
16  }
17
18  componentDidMount() {
19    // Call hook passing in the ref and a function to call on outside click
20    document.addEventListener("click", this.handleClickOutside);
21  }
22
23  componentWillUnmount() {
24    // Clean it on rerender
25    document.removeEventListener("click", this.handleClickOutside);
26  }
27
28  handleClickOutside(event) {
29    // Do nothing if clicking ref's element or descendent elements
30    const { isOpenDropdown } = this.state;
31    if (
32      this.ref &&
33      !this.ref.current.contains(event.target) &&
34      isOpenDropdown
35    ) {
36      this.setState({ isOpenDropdown: false });
37    }
38  }
39  render() {
40    const { isOpenDropdown } = this.state;
41    return (
42      <div ref={this.ref} className="menu">
43        <button
44          type="button"
45          onClick={(e) => {
46            e.preventDefault();
47            this.setState({ isOpenDropdown: !isOpenDropdown });
48          }}
49        >
50          Open menu
51        </button>
52        {isOpenDropdown && (
53          <div className="dropdown">
54            <ul>
55              <li>Copy</li>
56              <li>Paste</li>
57              <li>Delete</li>
58            </ul>
59          </div>
60        )}
61      </div>
62    );
63  }
64}
65
66export default App;
67