useClickOutside

지정된 요소 외부를 클릭했을 때 콜백을 실행하는 Hook입니다. Dropdown, Popover, Modal 등을 외부 클릭으로 닫을 때 사용합니다. 마우스와 터치 이벤트를 모두 지원합니다.

미리보기

드롭다운 외부를 클릭하면 자동으로 닫힙니다

사용법

1import { useState, useRef } from "react";
2import { Button } from "motile-ui";
3import { useClickOutside } from "motile-ui/hooks";
4
5export function ClickOutsideDemo() {
6  const [isOpen, setIsOpen] = useState(false);
7  const dropdownRef = useRef<HTMLDivElement>(null);
8  const buttonRef = useRef<HTMLButtonElement>(null);
9
10  useClickOutside({
11    refs: [dropdownRef, buttonRef] as React.RefObject<HTMLElement>[],
12    handler: () => setIsOpen(false),
13    enabled: isOpen,
14  });
15
16  return (
17    <div>
18      <Button
19        ref={buttonRef}
20        onClick={() => setIsOpen(!isOpen)}
21      >
22        {isOpen ? "드롭다운 닫기" : "드롭다운 열기"}
23      </Button>
24
25      {isOpen && (
26        <div ref={dropdownRef} className="dropdown">
27          <div>메뉴 항목 1</div>
28          <div>메뉴 항목 2</div>
29          <div>메뉴 항목 3</div>
30        </div>
31      )}
32    </div>
33  );
34}

API 레퍼런스

속성	타입	기본값	설명
`refs`	`RefObject<HTMLElement>[]`	`-`	클릭 감지에서 제외할 요소들의 ref 배열 (이 요소들 외부 클릭 시 handler 실행)
`handler`	`(event: MouseEvent \| TouchEvent) => void`	`-`	외부 클릭 시 실행할 콜백 함수
`enabled`	`boolean`	`true`	Hook 활성화 여부