use-viewport-size

Usage

use-viewport-size returns current viewport's width and height, it subscribes to resize and orientationchange events, during ssr hook will return { width: 0, height: 0 }:

import { useViewportSize } from '@mantine/hooks';

function Demo() {
  const { height, width } = useViewportSize();
  return <>Width: {width}, height: {height}</>;
}

Definition

function useViewportSize(): {
  height: number;
  width: number;
};