---

useWindowSize

npm i @tm-project/use-window-size

---

React хук, который возвращает текущие размеры окна браузера.

Использование

import React from 'react'
import { WindowSizeProvider, useWindowSize} from '@tm-project/use-window-size'

const Component = () => {
  const { width, height } = useWindowSize();
  return (
    <div>
      <p>Ширина окна: {width}px</p>
      <p>Высота окна: {height}px</p>
    </div>
  );
}

const App = () => {
  return (
    <WindowSizeProvider>
      <Component/>
      {/* Другие компоненты */}
    </WindowSizeProvider>
  );
}

API

Возвращаемые данные - 'object'

	Тип	Description
width	number	текущая ширина окна браузера в пикселях.
height	number	текущая высота окна браузера в пикселях.

Примечания

• Этот хук использует контекст для предоставления размеров окна браузера всем дочерним компонентам WindowSizeProvider при resize и orientationchange. Контекст используеться для того, чтобы избежать создания дополнительных слушателей событий, если рассматривать аналогичные библиотеки.
• Компонент WindowSizeProvider должен быть размещен выше в иерархии компонентов, чем компонент, который использует useWindowSize.
• Если вы используете библиотеку React Router, компонент WindowSizeProvider должен быть обернут в компонент Router для того, чтобы useWindowSize работал корректно.

LICENSE

MIT