---
title: useDeviceOrientation
description: "Tracks the physical orientation of the device using the `deviceorientation` window event, exposing reactive observables for all orientation angles."
category: Sensors
sidebar:
  order: 7
type-table:
  import: "@usels/web"
  name: "UseDeviceOrientation"
---

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { useDeviceOrientation } from "@usels/web";

    function MyComponent() {
      const { isSupported$, isAbsolute$, alpha$, beta$, gamma$ } = useDeviceOrientation();

      return (
        <div>
          <p>Alpha: {alpha$.get()}</p>
          <p>Beta: {beta$.get()}</p>
          <p>Gamma: {gamma$.get()}</p>
        </div>
      );
    }
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createDeviceOrientation } from "@usels/web";

    function MyComponent() {
      "use scope"
      const { isSupported$, isAbsolute$, alpha$, beta$, gamma$ } = createDeviceOrientation();

      return (
        <div>
          <p>Alpha: {alpha$.get()}</p>
          <p>Beta: {beta$.get()}</p>
          <p>Gamma: {gamma$.get()}</p>
        </div>
      );
    }
    ```

  </Fragment>
</CodeTabs>