👆

@lani.ground/react-outside-click-handler

React Component Library

NPM Version
Production Ready
TypeScript
🎯

Preview

Props 정의

NameTypeRequiredDescription
childrenReact.ReactNodeRequired외부 클릭 감지가 적용될 자식 컴포넌트
onOutsideClick(e: MouseEvent) => voidRequired외부 영역 클릭 시 호출되는 콜백
disabledbooleanOptional외부 클릭 감지 비활성화 여부 (기본값: false)
capturebooleanOptional이벤트 캡처링 사용 여부 (기본값: true)

Usage

1import { OutsideClickHandler } from '@lani.ground/react-outside-click-handler';
2
3const [isVisible, setIsVisible] = useState(false);
4
5<button type="button" onMouseDown={() => {
6  setIsVisible(!isVisible)
7}}>
8  Trigger
9</button>
10
11{isVisible && (
12  <OutsideClickHandler
13    onOutsideClick={() => {
14      setIsVisible(false);
15    }}
16  >
17    Something Code...
18  </OutsideClickHandler>
19)}
🎯

OutsideClickHandler Examples

👆

Dropdown Menu

외부 클릭을 감지하여 자동으로 닫히는 드롭다운 메뉴입니다. 사용자 경험을 향상시키는 필수 기능입니다.

선택된 번호:
none

사용법 안내

• 위 버튼을 클릭하여 드롭다운 메뉴를 열어보세요

• 메뉴 항목을 클릭하거나 외부 영역을 클릭하면 메뉴가 닫힙니다

• 현재 선택된 값이 위에 표시됩니다

주요 기능

  • 외부 클릭 감지
  • 자동 닫기
🎯

활용 예시

📋

메뉴 & 드롭다운

네비게이션 메뉴, 셀렉트 박스, 컨텍스트 메뉴 등

🪟

모달 & 팝업

툴팁, 팝오버, 다이얼로그의 외부 클릭 처리

🎛️

설정 패널

사이드바, 설정 드로어의 닫기 처리