usePermission

Introduce

사용자의 권한 상태의 변화를 감지하고, 권한 요청에 대한 상태를 자동으로 처리하는 훅입니다.

interface UsePermissionProps {
  permission:
    | 'accessibility-events'
    | 'accelerometer'
    | 'ambient-light-sensor'
    | 'background-fetch'
    | 'background-sync'
    | 'bluetooth'
    | 'camera'
    | 'captured-surface-control'
    | 'clipboard-read'
    | 'clipboard-write'
    | 'display-capture'
    | 'fullscreen'
    | 'geolocation'
    | 'gyroscope'
    | 'idle-detection'
    | 'keyboard-lock'
    | 'local-fonts'
    | 'magnetometer'
    | 'microphone'
    | 'midi'
    | 'nfc'
    | 'notifications'
    | 'payment-handler'
    | 'periodic-background-sync'
    | 'persistent-storage'
    | 'pointer-lock'
    | 'push'
    | 'screen-wake-lock'
    | 'speaker-selection'
    | 'storage-access'
    | 'system-wake-lock'
    | 'top-level-storage-access'
    | 'window-management';
}
 
interface UsePermissionReturns {
  status: 'granted' | 'prompt' | 'denied' | 'notSupported';
}
 
const useSomethingHook = (props: UsePermissionProps): UsePermissionReturns

주어진 권한에 대한 상태를 확인하고, 권한 상태가 변경될 때마다 업데이트합니다.

Props

permission : 확인하려는 권한의 이름을 입력합니다. Permission 타입은 사전 정의된 권한 이름과 문자열 모두 허용됩니다.

사전 정의된 권한은 Firefox, Chromium, WebKit에서 공통으로 사용하는 권한입니다.

Returns

status : 현재 권한의 상태를 반환합니다.

상태 값은 다음 중 하나일 수 있습니다: granted | prompt | denied | notSupported

🚫

클라이언트 환경이 아니거나 Permissions API가 지원되지 않는 경우, 권한 상태가 'notSupported'로 설정됩니다.

Examples

TestComponent.tsx

import React from 'react';
import usePermission from './usePermission';
 
const TestComponent = () => {
  const { status } = usePermission({ permission: 'geolocation' }); // prompt
 
  return (
    <div>
      <h1>권한 상태: {status}</h1>
    </div>
  );
};
 
export default TestComponent;

useOutsideClick usePrefersColorScheme