Sensors

useDevicePixelRatio

Reactively tracks window.devicePixelRatio using a matchMedia listener. Automatically updates when the display's pixel density changes (e.g., moving a window between monitors with different DPI, or browser zoom level changes).

Demo

Device Pixel Ratio

Not Supported

Reactively tracks window.devicePixelRatio. Try zooming in/out (Ctrl/Cmd + or -) to see it change.

Pixel Ratio

1.00

import { 
const useDevicePixelRatio: (options?: DeepMaybeObservable<UseDevicePixelRatioOptions>) => UseDevicePixelRatioReturn
useDevicePixelRatio } from "@usels/web";

function 
function PixelRatioDisplay(): JSX.Element
PixelRatioDisplay() {
  const { 
const isSupported$: ReadonlyObservable<boolean>
isSupported$, 
const pixelRatio$: ReadonlyObservable<number>
Current device pixel ratio
pixelRatio$ } = 
function useDevicePixelRatio(options?: DeepMaybeObservable<UseDevicePixelRatioOptions>): UseDevicePixelRatioReturn
Framework-agnostic reactive window.devicePixelRatio tracker.
Uses matchMedia('(resolution: Ndppx)') and re-registers the listener
whenever the DPR changes so callers always see the latest value.
useDevicePixelRatio();

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Supported: {
const isSupported$: ReadonlyObservable<boolean>
isSupported$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Pixel Ratio: {
const pixelRatio$: ReadonlyObservable<number>
Current device pixel ratio
pixelRatio$.
ImmutableObservableBase<number>.get(trackingType?: TrackingType | GetOptions): {}
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { createDevicePixelRatio } from "@usels/web";

function PixelRatioDisplay() {
  "use scope";
  const { isSupported$, pixelRatio$ } = createDevicePixelRatio();

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Pixel Ratio: {pixelRatio$.get()}</p>
    </div>
  );
}

Source

View on GitHub