useWindowSize()

Track dimensions of the browser window.

Usage

Default behaviour is to immediately return the current window size.

import { useWindowSize } from '@norr/hooks';
 
const Component = () => {
  const { width, height } = useWindowSize();
 
  return (
    <code>{JSON.stringify({ width, height })}</code>
  );
};

Performance

To enhance performance you can pass a debounce number (in milliseconds). This will delay the update of the window size until the user has stopped resizing the window for the given amount of time.

import { useWindowSize } from '@norr/hooks';
 
const Component = () => {
  const { width, height } = useWindowSize({
    debounce: 250,
  });
 
  return (
    <code>{JSON.stringify({ width, height })}</code>
  );
};

useWindowResize()Overview