Docs
Orientation

Orientation

Manage and respond to changes in device orientation

About

The useOrientation hook simplifies the management of a device’s orientation within a React application. It abstracts the complexity of listening for, handling, and cleaning up after orientation changes into a reusable hook, allowing easy tracking of device orientation and adapting to both the Screen Orientation API and the deprecated window.orientation property.

Return Values

NameTypeDescription
anglenumberThe current orientation angle of the device in degrees.
typestringThe current orientation type of the device (e.g., 'portrait-primary', 'landscape-primary', 'portrait-secondary', 'landscape-secondary'). If the type cannot be determined, it is 'UNKNOWN'.

Installation

Run the following command:

npx scriptkavi-hooks@latest add orientation

Usage

import { useOrientation } from "@/hooks/orientation"
import * as React from "react"
 
export default function App() {
  const orientation = useOrientation()
 
  return (
    <section>
      <h1>useOrientation</h1>
 
      <article
        style={{ "--angle": `${orientation.angle}deg` }}
        className={orientation.type.toLocaleLowerCase()}
      />
      <table>
        <tbody>
          {Object.keys(orientation).map((key) => {
            return (
              <tr key={key}>
                <th>{key}</th>
                <td>{orientation[key]}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </section>
  )
}
Object StatePreferred Language