useDeviceuseDevice

기기 클래스와 기본 입력, 키 안내를 쓸 수 있는지를 한 번에 알려줍니다.The device class, its primary input and whether key hints can be reached.

사용법Usage

compose-footer.tsx

import { Kbd, useDevice } from "@horon-ai/react";

function ComposeFooter() {
  const { type, keyboardHints } = useDevice();
  return (
    <footer className="flex items-center gap-2">
      <span className="text-caption">{type}</span>
      {keyboardHints && <Kbd keys="Mod+Enter" />}
    </footer>
  );
}

시그니처Signature

use-device.ts

export type DeviceType = "mobile" | "tablet" | "desktop";
export type DeviceInput = "touch" | "pointer";

export type Device = {
  type: DeviceType;
  input: DeviceInput;
  keyboardHints: boolean;
};

export function useDevice(): Device

매개변수Parameters

매개변수가 없습니다.Takes no parameters.

반환값Returns

현재 Device를 돌려줍니다. type, input, keyboardHints 세 필드입니다.The current Device: type, input and keyboardHints.

동작과 주의Behavior notes

type은 768px 아래에서 mobile, 그 위에서 포인터가 거칠면 tablet, 나머지는 desktop입니다.type is mobile below 768px, tablet for a coarse pointer above that, desktop otherwise.
input은 포인터가 거칠면 touch, 정밀하면 pointer입니다.input is touch for a coarse pointer and pointer for a fine one.
keyboardHints는 호버되는 정밀 포인터에서만 true입니다. 키 칩을 실제로 누를 수 있는 입력이 그때뿐이기 때문입니다.keyboardHints is true only for a hovering fine pointer, the input that can actually reach a key chip.
세 쿼리는 useMediaQuery를 거치므로 서버 렌더와 첫 하이드레이션 패스에서는 아무것도 읽지 않습니다. 그 패스는 데스크톱, pointer, 키 안내 켜짐을 보고합니다.The three queries go through useMediaQuery, so nothing is read during a server render or the first hydration pass: that pass reports desktop / pointer with keyboardHints on.
같은 기기 값에는 같은 객체 참조를 돌려줍니다.The returned object is shared, so a re-render with the same device hands back the same reference.