useWindowSize

function useWindowSize(options?: WindowSizeOptions): ElementSize;

import { useWindowSize } from "@react-md/core/useWindowSize";
import { useState } from "react";

function Example() {
  const { height, width } = useWindowSize();

  return (
    <>
      The current window size:
      <pre>
        <code>{JSON.stringify(size, null, 2)}</code>
      </pre>
    </>
  );
}

export interface WindowSizeOptions extends AddEventListenerOptions {
  /**
   * The default value to use in SSR environments for the window's height.
   *
   * @defaultValue `0`
   */
  ssrHeight?: number;

  /**
   * The default value to use in SSR environments for the window's width.
   *
   * @defaultValue `0`
   */
  ssrWidth?: number;

  /**
   * Set this to `true` to ignore resize events that only updated the height.
   * The hook can be disabled by setting this and {@link disableWidth} to
   * `true`.
   *
   * @defaultValue `false`
   */
  disableHeight?: boolean;

  /**
   * Set this to `true` to ignore resize events that only updated the width.
   * The hook can be disabled by setting this and {@link disableHeight} to
   * `true`.
   *
   * @defaultValue `false`
   */
  disableWidth?: boolean;

  /**
   * Set this to `false` to disable throttling with
   * `window.requestAnimationFrame`.
   *
   * @defaultValue `true`
   */
  throttle?: boolean;
}

export interface ElementSize {
  height: number;
  width: number;
}