в useEffect window.addEventListener("resize")
на событие resize можно повесить обработчик и в этой функции уже делать что-то. Не совсем понятно зачем именно в useEffect вы хотите это отследить
или вот https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/src/useMediaQuery.js
но лучше ответить зачем тебе нужно?
При изменении ширины экрана менять количество колонок в галлерее
а количество колонок задается в каком-то компоненте через пропс? такую задачу через css явно можно решить
Можно решить если картинки в такой галерее определенного размера, в моем случае они произвольного размера, сетка получается рваной. Пример такого случая - unsplash, можете проверить. Может я чего-то не понимаю и это можно реализовать по другому, то буду рад услышать совет)
как вариант сделать все картинки одинакового размера .image { max-width: 300px; width: 100%; }
скорей всего можно решить гридами через min max
Можно, но мне такой вариант не подходит
и вообще гуглани css masonry
а unsplash не поддерживает медиазапросы?
Сколько вариантов просмотрел, пришел к выводу что именно такого поведения не горидами все равно не получишь. Там одна картинка может заполнять две три пять строк, но это все равно прямоугольная сетка, в unsplash явно не так
Ну полюбому поддерживает
я не про цсс имел в виду как в swiper <Swiper breakpoints={{ // when window width is >= 640px 640: { width: 640, slidesPerView: 1, }, // when window width is >= 768px 768: { width: 768, slidesPerView: 2, }, }} > {slides} </Swiper>
Понятия не имею, такого не видел, но интересно)
Интересно, возможно мне это и нужно, благодарю
Обсуждают сегодня