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'