Чтобы определить размер экрана в приложении React, вы можете использовать несколько методов. Вот несколько популярных подходов:

1. Window.innerWidth и Window.innerHeight: вы можете использовать свойства window.innerWidthи window.innerHeightдля получения текущих размеров окна браузера. Эти свойства определяют ширину и высоту области просмотра в пикселях. Вы можете получить к ним доступ непосредственно в своем компоненте React, используя объект window.

const MyComponent = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });
  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return (
    <div>
      Window width: {windowSize.width}px
      <br />
      Window height: {windowSize.height}px
    </div>
  );
};

2. Хуки React и библиотеки размеров окон. Вы также можете использовать сторонние библиотеки, которые предоставляют собственные хуки React для обработки определения размера окна. Эти библиотеки обычно абстрагируют настройку прослушивателя событий и предоставляют простой способ получения размера окна. Некоторые популярные библиотеки включают react-useи react-window-size.

import { useWindowSize } from 'react-use';
const MyComponent = () => {
  const { width, height } = useWindowSize();
  return (
    <div>
      Window width: {width}px
      <br />
      Window height: {height}px
    </div>
  );
};

3. Медиа-запросы CSS. Еще один способ определить размер экрана — использовать медиа-запросы CSS. Вы можете определить различные стили в зависимости от ширины и высоты области просмотра с помощью CSS, а затем применить эти стили к своим компонентам React. Этот подход не обеспечивает обновления в реальном времени, но может быть полезен для применения различных стилей в зависимости от размера экрана.

import './MyComponent.css';
const MyComponent = () => {
  return <div className="my-component">Content</div>;
};

/* MyComponent.css */
.my-component {
  /* Styles for small screens */
}
@media (min-width: 768px) {
  .my-component {
    /* Styles for medium screens */
  }
}
@media (min-width: 1024px) {
  .my-component {
    /* Styles for large screens */
  }
}