Frontender Libs - обзор библиотек JS / CSS

Отслеживание размеров окна

React хук useWindowSize отслеживает размеры окна браузера для адаптивных интерфейсов. В SSR, где window недоступен, хук использует начальные значения (defaultWidth, defaultHeight). После гидратации размеры обновляются.

import { useState, useEffect } from 'react';

function useWindowSize(defaultWidth = 0, defaultHeight = 0) {
  const [windowSize, setWindowSize] = useState({
    width: defaultWidth,
    height: defaultHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

Хук возвращает объект { width, height } для динамической адаптации UI.

👉 @sWebDev

❤1👍1

www.tgoop.com/sWebDev/4083

285 viewsSep 29 at 06:44

Отслеживание размеров окна

React хук useWindowSize отслеживает размеры окна браузера для адаптивных интерфейсов. В SSR, где window недоступен, хук использует начальные значения (defaultWidth, defaultHeight). После гидратации размеры обновляются.

import { useState, useEffect } from 'react';

function useWindowSize(defaultWidth = 0, defaultHeight = 0) {
  const [windowSize, setWindowSize] = useState({
    width: defaultWidth,
    height: defaultHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

BY Frontender Libs - обзор библиотек JS / CSS