MatchMedia для определения типа устройства
ฝัง
- เผยแพร่เมื่อ 17 พ.ค. 2022
- Определяем размер экрана через кастомный хук и показываем контент по условию в React-приложении.
Ссылки из видео:
- matchMedia на MDN developer.mozilla.org/ru/docs...
- npm пакет use-match-media github.com/jepser/use-match-m...
- код кастомного хука codesandbox.io/s/use-match-me...
#js
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Если вы пишите тесты в своих приложения, то, во-первых, это очень хорошо =) А во-вторых, чтобы тестировать метод matchMedia и корректность его работы рекомендую поставить библиотеку *mock-match-media* .
БЛ, Сейчас искал свой старинный детский канал(я когда малой был пробовал снимать видео) нашел своего однофамильца с таким же именем как и у меня)
Хоть даже название канала не совпадало с названием твоего
@@sadmoment6716 еще есть шахматист - Ян Непомнящий)
Кто-то получает кайф от сериалов, кто-то от порнухи )) а я получаю кайф, когда вижу как пишут красиво код и объясняют. Я уже 2 года работаю, но до сих пор голоден ))
Михаил , ваш канал очень полезен , спасибо за контент
Супер, Михаил, спасибо за то что Вы делаете! Максимально качественно и максимально полезно! Не раз выручали)
Михаил, очень крутой контент на канале. спасибо за труд
Спасибо за видео! Очень помогло!
Михаил, отличный контент на канале. спасибо!
Спасибо! Вы очень помогли!!!
Это какая-то магия, только я сегодня услышал о MatchMedia, как ваш ролик уже у меня в рекомендациях) Большое спасибо за качественный и полезный контент!
Спасибо огромное. Хук то что надо. Сразу добавил его в свой проект. Очень удобно. Ваш канал один из лучших!
Вау! Спасибо, буду применять)
лучший канал
обычно в проде (для большей гибкости) используются breakpoints типа isXs, isXsMin, isSm, isSmMin, isMd, isMdMin, isLg, isLgMin, isXl, isXlMin, isXxl, isXxlMin, isXxxl - где Min покрывает все предыдущие совпадения... также вместо conditional render предпочитаю компоненты "обертки" с заранее прописанной логикой... в целом кое-что новое я таки для себя нашел... не знал за onChange хендлер! 👍 спс
Миша - лучший
В принципе, можно вынести mediaQueryLists и getValues из тела хука к queries - тогда сам хук почище будет на вид. И забыта зависимость [ ], чтобы не вешать/снимать обработчики на каждый рендер.
Первый 🤟🏼
нет ты четвертый
Спасибо за видео Подскажите, какая UI библиотека использована в этом проекте? Или дизайн с обычным css?
Спасибо огромное за очень полезный урок! Подскажи, пожалуйста, почему не надо передавать пустой массив зависимостей в хук useLayoutEffect, ведь он же по сути должен только на первый рендер добавить eventListener к matchMediaQuery? Я передал туда пустой массив зависимостей, однако теперь у меня происходит двойной вызов события при переходе на разную ширину экрана. Помоги, пожалуйста, понять, почему это так работает
Не лучше использовать просто addeventlistener 'resize' и просто брать window.innerHeight < 400, 768 и т.д., вместо создания 'x * breakpoints' обработчиков? Так же выносить в context, чтобы не были в каждом компоненте разные addeventlistener
Если этот хук использовать в нескольких местах (в разных компонентах), то не приведет ли это к тому что одинаковые обработчики будут объявляться много раз?
Расскажите пожалуйста, как вы разрабатываете под разные устройства. Через браузерстэк? Что порекомендуете для удобного дебага и правок на различных устройствах. Видел видео на канале у Вадима Макеева, у него на маке эмулятор есть.
Браузерстеком обычно Q&A специалисты пользуются. Иногда и девы, когда без этого воспроизвести не получается. Для ежедневной разработки, как правило, базового devTools в Хроме или Firefox вполне достаточно.
@@mishanep блин, ну не знаю. Вот на Айфоне например проблемы с высотами 100vh, потому что там то нижняя плашка, то верхняя в браузере меняет размер при скролле. Приходится постоянно с этим бороться.
можно ли узнать ширину экрана или окна чтобы узнать ширину веб документа без использования document? предположим что это используется для установления ширины каринки вместо медиазапросов.
Интересная задача - узнать что-то о документе, не обращаясь к самому документу =) Мы можем узнать размер устройства через window.screen, но у пользователя может быть открыт браузер не на весь экран. Саму ширину окна браузера также можно взять из window - window.innerWidth, развно как и для высоты есть аналогичное свойство.
@@mishanep согласен что проблема, но при использовании некст, когда виндов нет, а картинку надо создать приходится придумываать как это сделать без виндов и документа. вышестоящие разработчики сказали что надо без использования. хотя у документа все имеется что нужно и сделано уже и работает с этим как должно.
Вот только один вопрос есть к хуку - а че так можно было? Хук огонь, скокаж мне адаптив крови то попил...
Пользовательские хуки всегда интереснее писать. )))
Спасибо за полезный контент! Почему пишите min-width: 767px? Должно же быть 768px. Я даже на сайте бутстрапа проверил
Это просто пример и цифры могут быть любыми на ваше усмотрение. Также как и количество брейкпойнтов.
React порожняк ганяет туда сюда, пишешь всякое чтобы сделать элементарное действие
Пиши в функциональном программирование и порожняка не будет. А если привык мутациям тогда порожняк обеспечен не предсказуемый.
У нас же есть window.outerWidth < 991))