Use Orientation - Mantine

import { UseOrientationDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useOrientation);

Usage

The useOrientation hook returns an object with the current orientation of the device:

Definition

tsx

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 and UseOrientationReturnType types are exported from the @mantine/hooks package; you can import them in your application:

tsx

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