use-orientation

Detects device orientation and subscribe to its changes

Import

Usage

useOrientation returns an object with the current orientation of the device:

Angle: 0

Type: landscape-primary

import { Code, Text } from '@mantine/core';
import { useOrientation } from '@mantine/hooks';

function Demo() {
  const { angle, type } = useOrientation();
  return (
    <>
      <Text>
        Angle: <Code>{angle}</Code>
      </Text>
      <Text>
        Type: <Code>{type}</Code>
      </Text>
    </>
  );
}

Definition

function useOrientation(): {
  angle: number;
  type: string;
};