Skip to main content

useOrientation

React sensor hook that tracks screen orientation of user's device.

Usage​

Live Editor

function Demo() {
  const [state] = useOrientation();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
};
Result
Loading...

API​

useOrientation​

Returns​

readonly [UseOrientationState, (type: UseOrientationLockType) => any, () => void]: A tuple with the following elements:

  • orientation type.
  • lock orientation.
  • unlock orientation.

Arguments​

ArgumentDescriptionTypeDefaultValue
initialStateinitial valueUseOrientationState | undefined-

UseOrientationState​

PropertyDescriptionTypeDefaultValue
angledocument anglenumber (Required)-
typeorientation typeUseOrientationType | undefined (Required)-

UseOrientationType​

Type​

export type UseOrientationType = | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary";

UseOrientationLockType​

Type​

export type UseOrientationLockType = | "any" | "natural" | "landscape" | "portrait" | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary";