stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useScreenOrientation.md

category

category
Browser

useScreenOrientation

Reactive Screen Orientation API. It provides web developers with information about the user's current screen orientation.

Usage

import { useScreenOrientation } from '@vueuse/core';

const { isSupported, orientation, angle, lockOrientation, unlockOrientation } =
  useScreenOrientation();

To lock the orientation, you can pass an OrientationLockType to the lockOrientation function:

import { useScreenOrientation } from '@vueuse/core';

const { isSupported, orientation, angle, lockOrientation, unlockOrientation } =
  useScreenOrientation();

lockOrientation('portrait-primary');

and then unlock again, with the following:

import { useScreenOrientation } from '@vueuse/core';

const { unlockOrientation } = useScreenOrientation();
// ---cut---
unlockOrientation();

Accepted orientation types are one of "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" and "portrait".

Screen Orientation API MDN

Type Declarations

export type OrientationType =
  | 'portrait-primary'
  | 'portrait-secondary'
  | 'landscape-primary'
  | 'landscape-secondary';
export type OrientationLockType =
  | 'any'
  | 'natural'
  | 'landscape'
  | 'portrait'
  | 'portrait-primary'
  | 'portrait-secondary'
  | 'landscape-primary'
  | 'landscape-secondary';
export interface ScreenOrientation extends EventTarget {
  lock: (orientation: OrientationLockType) => Promise<void>;
  unlock: () => void;
  readonly type: OrientationType;
  readonly angle: number;
  addEventListener: (
    type: 'change',
    listener: (this: this, ev: Event) => any,
    useCapture?: boolean,
  ) => void;
}
/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useScreenOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>;
  orientation: Ref<OrientationType | undefined, OrientationType | undefined>;
  angle: ShallowRef<number, number>;
  lockOrientation: (type: OrientationLockType) => Promise<void>;
  unlockOrientation: () => void;
};
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>;