При написании проектов на Vue довольно часто прибегал к использованию плагина (который являлся глобальным миксином) для получения размеров экрана. Т.е, я где угодно в приложении мог заюзать this.windowWidth и this.windowHeight и это было максимально удобно.
Сейчас появилась необходимость сделать что-то похожее в реакте. Изначально написал хук, который динамически возвращает размеры окна :
import {useState, useEffect} from 'react'
export const useWindowSize = () => {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
})
const updateWindowSize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
})
}
useEffect(() => {
window.addEventListener('resize', updateWindowSize)
return window.removeEventListener(updateWindowSize)
}, [])
return size
}
И в принципе его то можно использовать, но если импортить его в каждый компонент, то, условно при наличии таких 5 компонентов, у меня 5 раз продублируется навешивание слушателя на resize. Какие есть удобные и аккуратные варианты для решения подобной ситуации, что бы эти размеры окна вычислялись в одном месте и дальше повсеместно использовались?
Пока что, с моей стороны вроде как самым правильным решением будет создать в корне приложения контекст с названием в духе WindowSize, в нём заюзать этот хук для размеров экрана и дальше, там где нужно, этот контекст импортить и использовать. Но тогда, как можно избежать постоянной записи в духе :
import WindowSize from './WindowSize';
const {width, height} = useContext(WindowSize)
Т.к. вьюшный вариант с тем, что не нужно что - либо импортировать, а просто берёшь и юзаешь this.windowWidth будет поудобнее :(
Простой
Простой