Use Viewport Size

import { UseViewportSizeDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useViewportSize);

Usage

The use-viewport-size hook returns the current viewport's width and height. It subscribes to resize and orientationchange events. During SSR, the hook will return { width: 0, height: 0 }:

Definition

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