В React JS обычно требуется размер окна для различных целей, например для адаптивного дизайна или динамической настройки элементов макета. В этой статье блога мы рассмотрим несколько методов получения размера окна в React JS, а также разговорные объяснения и примеры кода.

Метод 1: использование свойств window.innerWidth и window.innerHeight
Самый простой способ получить размер окна — прямой доступ к свойствам window.innerWidth и window.innerHeight. Эти свойства определяют ширину и высоту окна браузера соответственно. Вот пример фрагмента кода:

import React, { useEffect, useState } from 'react';
const WindowSizeComponent = () => {
  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
  useEffect(() => {
    const handleResize = () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    };
    window.addEventListener('resize', handleResize);
    handleResize(); // Initial window size
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return <div>Window width: {windowSize.width}, height: {windowSize.height}</div>;
};
export default WindowSizeComponent;

Метод 2. Использование перехватчика useLayoutEffect и свойств document.documentElement.clientWidth и document.documentElement.clientHeight.
Другой подход — использовать перехват useLayoutEffect вместе со свойствами document.documentElement.clientWidth и document.documentElement.clientHeight.. Эти свойства определяют ширину и высоту области просмотра, исключая полосы прокрутки. Вот пример фрагмента кода:

import React, { useLayoutEffect, useState } from 'react';
const WindowSizeComponent = () => {
  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
  useLayoutEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
      });
    };
    window.addEventListener('resize', handleResize);
    handleResize(); // Initial window size
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return <div>Window width: {windowSize.width}, height: {windowSize.height}</div>;
};
export default WindowSizeComponent;

Метод 3: использование специального перехватчика React
Создание специального перехватчика React может инкапсулировать логику получения размера окна для повторного использования во всем приложении. Вот пример пользовательского хука под названием useWindowSize:

import { useEffect, useState } from 'react';
const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
  useEffect(() => {
    const handleResize = () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    };
    window.addEventListener('resize', handleResize);
    handleResize(); // Initial window size
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return windowSize;
};
export default useWindowSize;

Чтобы использовать пользовательский хук, вы можете просто импортировать и вызвать его в своем компоненте:

import React from 'react';
import useWindowSize from './useWindowSize';
const WindowSizeComponent = () => {
  const windowSize = useWindowSize();
  return <div>Window width: {windowSize.width}, height: {windowSize.height}</div>;
};
export default WindowSizeComponent;