react-outside-click-handler

Handler component that make it easier to control when you click on a component other than the one you want.

Demo

Example

Installation

1npm install @lani.ground/react-outside-click-handler
2
3// or
4
5yarn add @lani.ground/react-outside-click-handler

Usage

1import { OutsideClickHandler } from "@lani.ground/react-outside-click-handler";
2
3const [selectedOption, setSelectedOption] = useState<string>("");
4const [isOpen, setIsOpen] = useState<boolean>(false);
5
6const OPTIONS = ["option1", "option2", "option3"];
7
8<button type="button" onClick={() => setIsOpen(true)}>
9  Click Me
10</button>
11
12{
13  isOpen && (
14    <OutsideClickHandler onOutsideClick={() => setIsOpen(false)}>
15      <ul className="bg-gray-500 px-5">
16        {OPTIONS.map((option) => (
17          <li>
18            <button
19              type="button"
20              onClick={() => {
21                setIsOpen(false);
22              }}
23            >
24              {option}
25            </button>
26          </li>
27        ))}
28      </ul>
29    </OutsideClickHandler>
30  );
31}
32
33<p>
34  selected: <strong>{selectedOption}</strong>
35</p>

Props

Name	Type	Description
onOutsideClick(required)	() => void	Function called when a click occurs outside the consumer's area 소비자 컴포넌트의 영역을 제외한 영역을 클릭했을 때 호출되는 함수
children(required)	JSX.Element	Consumer Component 소비자 컴포넌트
disabled(optional)	boolean(default: false)	ouside click disabled 외부 영역 클릭 비활성화
capture(optional)	boolean(default: true)	Whether capturing is enabled 캡처링 사용 여부