Browser

useScreenOrientation

Reactive wrapper for the Screen Orientation API. Tracks the current screen orientation type and angle, and provides methods to lock and unlock orientation.

Demo

Screen Orientation

Not Supported

Tracks screen orientation via the Screen Orientation API.

Orientation

—

Angle

0°

Usage

Hook
Scope

import { 
const useScreenOrientation: (options?: DeepMaybeObservable<UseScreenOrientationOptions>) => UseScreenOrientationReturn
useScreenOrientation } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const { 
const isSupported$: ReadonlyObservable<boolean>
isSupported$, 
const orientation$: ReadonlyObservable<OrientationType | undefined>
orientation$, 
const angle$: ReadonlyObservable<number>
angle$, 
const lockOrientation: (type: OrientationLockType) => Promise<void>
lockOrientation, 
const unlockOrientation: () => void
unlockOrientation } =
    
function useScreenOrientation(options?: DeepMaybeObservable<UseScreenOrientationOptions>): UseScreenOrientationReturn
Framework-agnostic reactive wrapper around the
Screen Orientation API.
@param ― options - Optional ConfigurableWindow (defaults to global window).
@returns ― Observable orientation type, angle, support flag, and lock helpers.
useScreenOrientation();

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Type: {
const orientation$: ReadonlyObservable<OrientationType | undefined>
orientation$.
ImmutableObservableBase<OrientationType | undefined>.get(trackingType?: TrackingType | GetOptions): any
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Angle: {
const angle$: ReadonlyObservable<number>
angle$.
ImmutableObservableBase<number>.get(trackingType?: TrackingType | GetOptions): {}
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => 
const lockOrientation: (type: OrientationLockType) => Promise<void>
lockOrientation("landscape")}>Lock landscape</
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
      <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => 
const unlockOrientation: () => void
unlockOrientation()}>Unlock</
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { createScreenOrientation } from "@usels/web";

function Component() {
  "use scope"
  const { isSupported$, orientation$, angle$, lockOrientation, unlockOrientation } =
    createScreenOrientation();

  return (
    <div>
      <p>Type: {orientation$.get()}</p>
      <p>Angle: {angle$.get()}</p>
      <button onClick={() => lockOrientation("landscape")}>Lock landscape</button>
      <button onClick={() => unlockOrientation()}>Unlock</button>
    </div>
  );
}

Type

Parameters

Parameter	Type	Description
`options`	`ConfigurableWindow` (optional)	- Optional `ConfigurableWindow` (defaults to global `window`).

Returns

UseScreenOrientationReturn

Name	Type	Description
`orientation$`	`ReadonlyObservable<OrientationType \| undefined>`	-
`angle$`	`ReadonlyObservable<number>`	-
`lockOrientation`	`(type: OrientationLockType) => Promise<void>`	-
`unlockOrientation`	`() => void`	-
`isSupported$`	`ReadonlyObservable<boolean>`	-

Source

View on GitHub