useOrientation

useOrientation (기기 방향 감지)

useOrientation 훅은 기기의 현재 방향을 포함한 객체를 반환해요. 방향 각도와 타입을 감지하고 그 변경을 구독해요.

출처: 문서

본문

useOrientation 훅은 기기의 현재 방향을 가진 객체를 반환해요.

import { Code, Text } from '@mantine/core';
import { useOrientation } from '@mantine/hooks';

function Demo() {
  const { angle, type } = useOrientation();
  return (
    <>
      <Text>
        Angle: <Code>{angle}</Code>
      </Text>
      <Text>
        Type: <Code>{type}</Code>
      </Text>
    </>
  );
}

정의 (Definition)

interface UseOrientationOptions {
  /** Default angle value, used until the real value can be retrieved
   * (during server-side rendering and before JS executes on the page).
   * If not provided, the default value is `0`.
   * */
  defaultAngle?: number;
  /** Default type value, used until the real value can be retrieved
   * (during server-side rendering and before JS executes on the page).
   * If not provided, the default value is `'landscape-primary'`.
   * */
  defaultType?: OrientationType;
  /** If true, the initial value will be resolved in useEffect (SSR safe).
   *  If false, the initial value will be resolved in useLayoutEffect (SSR unsafe).
   *  True by default.
   */
  getInitialValueInEffect?: boolean;
}

interface UseOrientationReturnType {
  angle: number;
  type: OrientationType;
}

function useOrientation(options?: UseOrientationOptions): UseOrientationReturnType;

Exported types

UseOrientationOptions와 UseOrientationReturnType 타입은 @mantine/hooks 패키지에서 내보내져요.

import type { UseOrientationOptions, UseOrientationReturnType } from '@mantine/hooks';

더 알아보기 (Learn more)