useWindowDimensions (React Hook)

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  if(typeof window !== 'undefined') {
    const { innerWidth: width, innerHeight: height } = window;
    return {
      width,
      height
    };
  }
  else {
    return {width:0,height:0}
  }
} 

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }
    if(typeof window !== 'undefined') {
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }
  }, []);

  return windowDimensions;
}

Användning

Denna React hooken kan användas för att få bredden och höjden på det nuvarande fönstret, vilket kan vara användbart för att skapa responsiv design. Det löser också problemet med att fönstret inte är definierat när komponenten först renderas.

Ett exempel på användning:

import useWindowDimensions from '../hooks/useWindowDimensions';

export default function MyComponent() {
  const { width, height } = useWindowDimensions();
  return (
    <div>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
}