Простой пользовательский хук для доступа к типу размера экрана. Полезно для получения логических значений isMobile, isTablet и isDesktop.

Зачем нам нужна информация о области просмотра?

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

CSS Media query отлично справляются с этими сценариями, помогая применять правильные стили в зависимости от размера экрана.

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

Простой пример состоит из рендеринга разных текстов в зависимости от размера экрана:

К счастью, в этом помогает специальный хук React useMediaQuery, предоставляющий доступ к результату медиа-запроса непосредственно из компонента, написанного на React.

Тогда зачем мне useViewport?

Пользовательский хук `useMediaQuery` отлично подходит для извлечения логического значения для переданного медиа-запроса, но при его многократном использовании в кодовой базе он может сделать код немного нечитаемым и трудным для понимания.

Вот почему, используя возможность компоновки хуков, мы можем абстрагировать эту повторяющуюся логику в пользовательский хук useViewport.

техническая реализация useViewport

Что разработчик React обычно использует, так это несколько логических флагов, чтобы узнать, имеет ли текущее устройство типичный размер окна просмотра для мобильных устройств, планшетов или настольных компьютеров.

Это означает, что наш пользовательский хук должен возвращать по крайней мере эти три значения, которые мы запомним как:

  • Мобильный
  • планшет
  • это рабочий стол

В этой реализации я использую ловушку useMediaQuery, чтобы узнать, имеет ли устройство размер мобильного устройства или планшета, и, используя эти два логических значения, я могу напрямую классифицировать все остальные устройства как режим рабочего стола.

Очевидно, что вы можете определить свою точку останова мультимедиа так, как вы предпочитаете для своего приложения, те, которые используются в реализации, являются лишь примерами того, как можно передать медиа-запрос в useMediaQuery.

Подведение итогов

Теперь, когда у нас есть готовый хук, мы можем, наконец, завершить реализацию предыдущего варианта использования, который мы оставили в ожидании: