1---
2category: Browser
3---
4 
5# useScreenOrientation
6 
7Reactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API). It provides web developers with information about the user's current screen orientation.
8 
9## Usage
10 
11```ts
12import { useScreenOrientation } from '@vueuse/core'
13 
14const {
15  isSupported,
16  orientation,
17  angle,
18  lockOrientation,
19  unlockOrientation,
20} = useScreenOrientation()
21```
22 
23To lock the orientation, you can pass an [OrientationLockType](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/type) to the lockOrientation function:
24 
25```ts
26import { useScreenOrientation } from '@vueuse/core'
27 
28const {
29  isSupported,
30  orientation,
31  angle,
32  lockOrientation,
33  unlockOrientation,
34} = useScreenOrientation()
35 
36lockOrientation('portrait-primary')
37```
38 
39and then unlock again, with the following:
40 
41```ts
42import { useScreenOrientation } from '@vueuse/core'
43 
44const { unlockOrientation } = useScreenOrientation()
45// ---cut---
46unlockOrientation()
47```
48 
49Accepted orientation types are one of `"landscape-primary"`, `"landscape-secondary"`, `"portrait-primary"`, `"portrait-secondary"`, `"any"`, `"landscape"`, `"natural"` and `"portrait"`.
50 
51[Screen Orientation API MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API)
52 
53## Type Declarations
54 
55```ts
56export type OrientationType =
57  | "portrait-primary"
58  | "portrait-secondary"
59  | "landscape-primary"
60  | "landscape-secondary"
61export type OrientationLockType =
62  | "any"
63  | "natural"
64  | "landscape"
65  | "portrait"
66  | "portrait-primary"
67  | "portrait-secondary"
68  | "landscape-primary"
69  | "landscape-secondary"
70export interface ScreenOrientation extends EventTarget {
71  lock: (orientation: OrientationLockType) => Promise<void>
72  unlock: () => void
73  readonly type: OrientationType
74  readonly angle: number
75  addEventListener: (
76    type: "change",
77    listener: (this: this, ev: Event) => any,
78    useCapture?: boolean,
79  ) => void
80}
81export interface UseScreenOrientationOptions extends ConfigurableWindow {}
82export interface UseScreenOrientationReturn extends Supportable {
83  orientation: Ref<OrientationType | undefined>
84  angle: ShallowRef<number>
85  lockOrientation: (type: OrientationLockType) => Promise<void>
86  unlockOrientation: () => void
87}
88/**
89 * Reactive screen orientation
90 *
91 * @see https://vueuse.org/useScreenOrientation
92 *
93 * @__NO_SIDE_EFFECTS__
94 */
95export declare function useScreenOrientation(
96  options?: UseScreenOrientationOptions,
97): UseScreenOrientationReturn
98```
99