useWindowSize

💡 Implementation

Pretty

Copy

1
function getSize() {
  return {
    innerHeight: window.innerHeight,
    innerWidth: window.innerWidth,
    outerHeight: window.outerHeight,
    outerWidth: window.outerWidth
  };
}
function useWindowSize() {
  let [windowSize, setWindowSize] = useState(getSize());
  function handleResize() {
    setWindowSize(getSize());
  }
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return windowSize;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

🚀 Usage

Pretty

Copy

1
function Demo() {
  const size = useWindowSize();
  return <div>{size.innerWidth}</div>;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

⚡Preview

1440

🚨 console

💄 Improve this hook

Contributors

Raathigeshan