useKeyboardToggle

@hua-labs/hua/framework

Pro

출시 예정

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

키보드 단축키 기반 상태 토글 (Pro)

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useKeyboardToggle } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

import { useKeyboardToggle } from "@hua-labs/hua/framework";

const { isToggled, toggle } = useKeyboardToggle({
  key: 'j',
  modifiers: ['ctrl'], // 'ctrl' | 'shift' | 'alt' | 'meta'
  preventDefault: true,
});

// isToggled changes when Ctrl+J is pressed
return (
  <CommandPalette isOpen={isToggled} onClose={toggle} />
);

라이브 데모

키보드 단축키 데모

Ctrl+J

메뉴 열기/닫기

F

전체화면 토글

Esc

모두 닫기

메뉴 상태

닫힘

전체화면

비활성

API 레퍼런스

옵션

이름	타입	기본값	설명
key	string	-	감지할 키 (e.g. 'k', 'Escape')
modifiers	("ctrl" \| "shift" \| "alt" \| "meta")[]	[]	조합 키 배열 ('ctrl', 'shift', 'alt', 'meta')
preventDefault	boolean	true	기본 브라우저 동작 방지 여부
enabled	boolean	true	훅 활성화 여부
ignoreInputs	boolean	true	input/textarea 포커스 시 무시 여부

반환값

이름	타입	설명
isToggled	boolean	현재 토글 상태
toggle	() => void	재생/일시정지 토글
setToggled	(value: boolean) => void	토글 상태 직접 설정
enable	() => void	훅 활성화
disable	() => void	훅 비활성화
isEnabled	boolean	현재 활성화 여부
mounted	boolean	클라이언트 마운트 여부

사용 사례

커맨드 팔레트

Ctrl+K 스타일 커맨드 팔레트 토글

전체화면 토글

키보드로 전체화면 모드 전환

모달 컨트롤

Escape 키로 모달 닫기

테마 토글

단축키로 다크/라이트 모드 전환

useLayoutMotionPro usePerformanceMonitorPro