useScreenOrientation

Category

Browser

Export Size

434 B

Last Changed

5 days ago

Reactive Screen Orientation API

Demo

Usage

import { useScreenOrientation } from '@reause/core'

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

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

lockOrientation('portrait-primary')

and then unlock again, with the following:

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

Toggle

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;
}

export interface UseScreenOrientationOptions {
    window?: Window;
}

export interface UseScreenOrientationReturn {
    isSupported: boolean;
    orientation: OrientationType | undefined;
    angle: number;
    lockOrientation: (type: OrientationLockType) => Promise<void>;
    unlockOrientation: () => void;
}

export function useScreenOrientation(options?: UseScreenOrientationOptions): UseScreenOrientationReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

01d57 - fix(core): resolve useScreenOrientation audit findings (#633)