Skip to content

useViewport

Track the screen viewport (screen width and height).

Return Values

NameTypeDescription
widthNumberthe viewport width.
heightNumberthe viewport height.

Example Usage

tsx
import { useViewport } from 'react-pre-hooks';

export default function Example() {
  const { width, height } = useViewport();

  return (
    <main>
      <h1>Resize the window.</h1>
      <p>
        width: {width}, height: {height}
      </p>
    </main>
  );
}
import { useViewport } from 'react-pre-hooks';

export default function Example() {
  const { width, height } = useViewport();

  return (
    <main>
      <h1>Resize the window.</h1>
      <p>
        width: {width}, height: {height}
      </p>
    </main>
  );
}

Released under the MIT License.