react_use_hookit_click_outside_dropdown_toggle.ts

1import React, { useRef, useState } from 'react';
2import { useClickOutside } from 'use-hookit';
3
4const ClickOutsideComponent: React.FC = () => {
5  const [isOpen, setIsOpen] = useState<boolean>(false);
6  const dropdownRef = useRef<HTMLDivElement>(null);
7
8  useClickOutside(dropdownRef, () => {
9    setIsOpen(false);
10  });
11
12  return (
13    <div>
14      <button onClick={() => setIsOpen(!isOpen)}>
15        {isOpen ? 'Close Menu' : 'Open Menu'}
16      </button>
17
18      {isOpen && (
19        <div
20          ref={dropdownRef}
21          style={{
22            border: '1px solid black',
23            padding: '10px',
24            marginTop: '5px',
25          }}
26        >
27          <p>Click outside this box to close it.</p>
28        </div>
29      )}
30    </div>
31  );
32};
33
34export default ClickOutsideComponent;