🎯
Preview
Props 정의
Name | Type | Required | Description |
---|---|---|---|
children | React.ReactNode | Required | 외부 클릭 감지가 적용될 자식 컴포넌트 |
onOutsideClick | (e: MouseEvent) => void | Required | 외부 영역 클릭 시 호출되는 콜백 |
disabled | boolean | Optional | 외부 클릭 감지 비활성화 여부 (기본값: false) |
capture | boolean | Optional | 이벤트 캡처링 사용 여부 (기본값: true) |
Usage
🎯
OutsideClickHandler Examples
👆
Dropdown Menu
외부 클릭을 감지하여 자동으로 닫히는 드롭다운 메뉴입니다. 사용자 경험을 향상시키는 필수 기능입니다.
선택된 번호:
none
사용법 안내
• 위 버튼을 클릭하여 드롭다운 메뉴를 열어보세요
• 메뉴 항목을 클릭하거나 외부 영역을 클릭하면 메뉴가 닫힙니다
• 현재 선택된 값이 위에 표시됩니다
주요 기능
- 외부 클릭 감지
- 자동 닫기
🎯
활용 예시
📋
메뉴 & 드롭다운
네비게이션 메뉴, 셀렉트 박스, 컨텍스트 메뉴 등
🪟
모달 & 팝업
툴팁, 팝오버, 다이얼로그의 외부 클릭 처리
🎛️
설정 패널
사이드바, 설정 드로어의 닫기 처리