MatchMedia для определения типа устройства

Определяем размер экрана через кастомный хук и показываем контент по условию в React-приложении.
Ссылки из видео:
- matchMedia на MDN developer.mozi...
- npm пакет use-match-media github.com/jep...
- код кастомного хука codesandbox.io...
#js
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...

[@mishanep]

Если вы пишите тесты в своих приложения, то, во-первых, это очень хорошо =) А во-вторых, чтобы тестировать метод matchMedia и корректность его работы рекомендую поставить библиотеку *mock-match-media* .

[@sadmoment6716]

БЛ, Сейчас искал свой старинный детский канал(я когда малой был пробовал снимать видео) нашел своего однофамильца с таким же именем как и у меня) Хоть даже название канала не совпадало с названием твоего

[@ri4an598]

@@sadmoment6716 еще есть шахматист - Ян Непомнящий)

[@boycovclub]

Кто-то получает кайф от сериалов, кто-то от порнухи )) а я получаю кайф, когда вижу как пишут красиво код и объясняют. Я уже 2 года работаю, но до сих пор голоден ))

[@user-fs1pm5oe5s]

Супер, Михаил, спасибо за то что Вы делаете! Максимально качественно и максимально полезно! Не раз выручали)

[@TEMA2294]

Михаил , ваш канал очень полезен , спасибо за контент

[@custercuster4918]

Это какая-то магия, только я сегодня услышал о MatchMedia, как ваш ролик уже у меня в рекомендациях) Большое спасибо за качественный и полезный контент!

[@rasul3d]

Спасибо огромное. Хук то что надо. Сразу добавил его в свой проект. Очень удобно. Ваш канал один из лучших!

[@user-uf8nw6uc9z]

Михаил, очень крутой контент на канале. спасибо за труд

[@AndrewFloatrx]

обычно в проде (для большей гибкости) используются breakpoints типа isXs, isXsMin, isSm, isSmMin, isMd, isMdMin, isLg, isLgMin, isXl, isXlMin, isXxl, isXxlMin, isXxxl - где Min покрывает все предыдущие совпадения... также вместо conditional render предпочитаю компоненты "обертки" с заранее прописанной логикой... в целом кое-что новое я таки для себя нашел... не знал за onChange хендлер! 👍 спс

[@CJIu3eHb]

В принципе, можно вынести mediaQueryLists и getValues из тела хука к queries - тогда сам хук почище будет на вид. И забыта зависимость [ ], чтобы не вешать/снимать обработчики на каждый рендер.

[@anv7259]

лучший канал

[@user-vm2db5cq1g]

Михаил, отличный контент на канале. спасибо!

[@alexnixx]

Вау! Спасибо, буду применять)

[@akbarkadyrov4619]

Миша - лучший

[@denispepper2830]

Спасибо за видео! Очень помогло!

[@Dima-wg5kj]

Спасибо! Вы очень помогли!!!

[@GagikHarutyunyan_dev]

Не лучше использовать просто addeventlistener 'resize' и просто брать window.innerHeight < 400, 768 и т.д., вместо создания 'x * breakpoints' обработчиков? Так же выносить в context, чтобы не были в каждом компоненте разные addeventlistener

[@MS-wh8ky]

Спасибо огромное за очень полезный урок! Подскажи, пожалуйста, почему не надо передавать пустой массив зависимостей в хук useLayoutEffect, ведь он же по сути должен только на первый рендер добавить eventListener к matchMediaQuery? Я передал туда пустой массив зависимостей, однако теперь у меня происходит двойной вызов события при переходе на разную ширину экрана. Помоги, пожалуйста, понять, почему это так работает

[@EVolkov18]

Если этот хук использовать в нескольких местах (в разных компонентах), то не приведет ли это к тому что одинаковые обработчики будут объявляться много раз?

[@user-fq4pc7fm2z]

Спасибо за видео Подскажите, какая UI библиотека использована в этом проекте? Или дизайн с обычным css?

[@daniilthegunner843]

Расскажите пожалуйста, как вы разрабатываете под разные устройства. Через браузерстэк? Что порекомендуете для удобного дебага и правок на различных устройствах. Видел видео на канале у Вадима Макеева, у него на маке эмулятор есть.

[@mishanep]

Браузерстеком обычно Q&A специалисты пользуются. Иногда и девы, когда без этого воспроизвести не получается. Для ежедневной разработки, как правило, базового devTools в Хроме или Firefox вполне достаточно.

[@daniilthegunner843]

@@mishanep блин, ну не знаю. Вот на Айфоне например проблемы с высотами 100vh, потому что там то нижняя плашка, то верхняя в браузере меняет размер при скролле. Приходится постоянно с этим бороться.

[@igoril7813]

Вот только один вопрос есть к хуку - а че так можно было? Хук огонь, скокаж мне адаптив крови то попил...

[@user-tj8yn5tl2h]

Пользовательские хуки всегда интереснее писать. )))

[@biLLie_wiLLie]

Спасибо за полезный контент! Почему пишите min-width: 767px? Должно же быть 768px. Я даже на сайте бутстрапа проверил

[@mishanep]

Это просто пример и цифры могут быть любыми на ваше усмотрение. Также как и количество брейкпойнтов.

[@romanmed9035]

можно ли узнать ширину экрана или окна чтобы узнать ширину веб документа без использования document? предположим что это используется для установления ширины каринки вместо медиазапросов.

[@mishanep]

Интересная задача - узнать что-то о документе, не обращаясь к самому документу =) Мы можем узнать размер устройства через window.screen, но у пользователя может быть открыт браузер не на весь экран. Саму ширину окна браузера также можно взять из window - window.innerWidth, развно как и для высоты есть аналогичное свойство.

[@romanmed9035]

@@mishanep согласен что проблема, но при использовании некст, когда виндов нет, а картинку надо создать приходится придумываать как это сделать без виндов и документа. вышестоящие разработчики сказали что надо без использования. хотя у документа все имеется что нужно и сделано уже и работает с этим как должно.

[@antonmolotow2414]

Первый 🤟🏼

[@makeouthell1644]

нет ты четвертый

[@vovamagic659]

React порожняк ганяет туда сюда, пишешь всякое чтобы сделать элементарное действие

[@user-tj8yn5tl2h]

Пиши в функциональном программирование и порожняка не будет. А если привык мутациям тогда порожняк обеспечен не предсказуемый.

[@govorov_top]

У нас же есть window.outerWidth < 991))