useEscapeKey

ESC 키를 눌렀을 때 콜백을 실행하는 Hook입니다. Modal, Drawer, Popover 등을 닫는 용도로 사용합니다.

미리보기

모달이 열리면 ESC 키를 눌러 닫을 수 있습니다

사용법

1import { useState } from "react";
2import { Button } from "motile-ui";
3import { useEscapeKey } from "motile-ui/hooks";
4
5export function EscapeKeyDemo() {
6  const [isOpen, setIsOpen] = useState(false);
7
8  useEscapeKey({
9    handler: () => setIsOpen(false),
10    enabled: isOpen,
11  });
12
13  return (
14    <div>
15      <Button onClick={() => setIsOpen(true)}>
16        모달 열기
17      </Button>
18
19      {isOpen && (
20        <div className="overlay">
21          <div className="modal">
22            <h3>useEscapeKey 데모</h3>
23            <p>ESC 키를 눌러 이 모달을 닫아보세요!</p>
24            <div className="keyboard-hint">
25              <kbd>ESC</kbd>
26            </div>
27            <Button variant="secondary" onClick={() => setIsOpen(false)}>
28              닫기
29            </Button>
30          </div>
31        </div>
32      )}
33    </div>
34  );
35}

API 레퍼런스

속성	타입	기본값	설명
`handler`	`(event: KeyboardEvent) => void`	`-`	ESC 키 입력 시 실행할 콜백 함수
`enabled`	`boolean`	`true`	Hook 활성화 여부