Skip to main content
react-md

useOrientation

function useOrientation(): OrientationType;

You most likely want to use the useAppSize hook instead.

This hook uses the ScreenOrientation API to determine if the screen is landscape or portrait. For browsers that do not support this API yet, it will polyfill that behavior using a resize handler instead.

Example Usage

import { useOrientation } from "@react-md/core/useOrientation";

function Example() {
  const orientation = useOrientation();
  const isLandscape = orientation.includes("landscape");

  return <>{isLandscape ? "Landscape" : "Portrait"}</>;
}

Parameters

None.

Returns

The OrientationType which is defined as "landscape-primary" | "landscape-secondary" | "portrait-primary" | "portrait-secondary".

See Also