useOrientation

Hook that provides the current screen orientation

sensors

low

test coverage

Last changed: 6 months ago

TIP

This hook uses screen.orientation browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

import { useOrientation } from '@siberiacancode/reactuse';

Usage

const { supported, value, lock, unlock } = useOrientation();

Demo

source

Api

Returns

useOrientationReturn

Type declaration

interface ScreenOrientation {
    lock: (orientation: OrientationLockType) => Promise<void>;
  }

export interface UseOrientationValue {
  /** The current angle */
  angle: number;
  /** The current orientation type */
  orientationType?: OrientationType;
}

export type OrientationLockType =
  | 'any'
  | 'landscape-primary'
  | 'landscape-secondary'
  | 'landscape'
  | 'natural'
  | 'portrait-primary'
  | 'portrait-secondary'
  | 'portrait';

export interface useOrientationReturn {
  /** Whether the screen orientation is supported */
  supported: boolean;
  /** The current screen orientation value */
  value: UseOrientationValue;
  /** Lock the screen orientation */
  lock: (orientation: OrientationLockType) => void;
  /** Unlock the screen orientation */
  unlock: () => void;
}

Source

Source • Demo

Contributors

D

debabin

B

babin

H

hywax