Skip to main content

useResolution

This hook returns the size of the area your widget renders into, in pixels. It is useful for creating responsive layouts that adapt to different display sizes.

The value is the room your widget has on the frame — the slot it occupies, less any border, padding or name bar drawn around it — not the device's full screen. A widget placed in a quarter of the frame sees roughly a quarter of the screen's dimensions. Two copies of the same widget on one frame can therefore report different resolutions.

Dimensions are already oriented: on a frame mounted in portrait, width is the short edge, so you never need to know the physical mount orientation.

The border and padding around your widget are already taken off, so the reported size is exactly the area your widget fills, the same area the breakpoints follow. Size elements with CSS (100%, h-full) where you can, and reach for useResolution when you need real numbers — SVG geometry, canvas sizing, or picking a layout.

Import​

import { useResolution } from "~lib/use-resolution";

API​

const { width, height } = useResolution();

Parameters​

This hook takes no parameters.

Return Value​

NameTypeDescription
resolution{ width: number, height: number }The room your widget fills on the frame, in oriented CSS pixels

Example​

import { useResolution } from "~lib/use-resolution";

const Widget = () => {
  const { width, height } = useResolution();

  const isLandscape = width > height;
  const fontSize = Math.min(width, height) / 10;

  return (
    <div
      style={{
        display: "flex",
        flexDirection: isLandscape ? "row" : "column",
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        height: "100%",
      }}
    >
      <h1 style={{ fontSize }}>
        {width} x {height}
      </h1>
      <p>Orientation: {isLandscape ? "Landscape" : "Portrait"}</p>
    </div>
  );
};

See Also​