useAdaptivityWithJSMediaQueries
Хук возвращает расширенную версию параметров адаптивности. Условия реализованы через matchMedia() ↗.
Связанные страницы:
Когда использовать?
Используйте когда нужно показать или скрыть элемент интерфейса по тому или иному брейкпоинту, но при условии, что вы:
- либо не поддерживаете SSR;
- либо у вас есть компонент, который не показывается при первом рендере.
В библиотеке хук используется для всплывающих окон как раз из-за того, что они удовлетворяют условию показа только после первого рендера.
API
Возвращаемое значение
Объект с параметрами адаптивности:
| Свойство | Тип | Описание |
|---|---|---|
isDesktop | boolean | Флаг десктопного режима. |
viewWidth | number | Текущий брейкпоинт ширины экрана. |
viewHeight | number | Текущий брейкпоинт высоты экрана. |
sizeX | 'compact' | 'regular' | Устаревшее поле. Используйте density. |
sizeY | 'compact' | 'regular' | Устаревшее поле. Используйте density. |
density | 'compact' | 'regular' | Плотность интерфейса. |
hasPointer | boolean | Есть ли у устройства точный указатель. |
hasHover | boolean | Поддерживает ли устройство наведение. |
Пример использования
Предположим, что нам не нужна поддержка SSR и нужно показать дополнительную колонку только на настольных экранах.