use-viewport-size

Get viewport width and height
Import

Usage

Hook returns current viewport width and height, it subscribes to resize and orientationchange events, during ssr hook will return { width: 0, height: 0 }:

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;
};
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback