react-queries
Реакт компонент для управления медиа запросами
Язык документации: Русский, English
Как установить
Если используете npm: npm install react-queries
Если используете yarn: yarn add react-queries
Как использовать
Простой
;; const Example = <Query match= type: 'screen' minWidth: 600 maxWidth: 1200 > Какой-то контент </Query>;
Отобразится как @media:
Расширенный
;; const Example = <Query match= minWidth: 'screen' 600 maxWidth: 'print' 1200 > Какой-то контент </Query>;
Отобразится как @media:
Пропсы
Поле | Тип | Обязательно |
---|---|---|
match | Shape(Matches)¹ | Да |
¹Matches
Поле | Тип | Описание |
---|---|---|
type | строка | Один из поддерживаемых типов² (опционально) |
[запрос из запросов]³ | строка | число | [type²: строка, query³: строка | число] | Один из поддерживаемых запросов³. В расширенном использовании - поле является обязательным вместе с типом и запросом, но нельзя использовать поле типа отдельно |
Поддерживаемые match поля
Типы² | Запросы³ |
---|---|
all | aspectRatio |
minAspectRatio | |
screen | maxAspectRatio |
speech | minColor |
maxColor | |
colorIndex | |
minColorIndex | |
maxColorIndex | |
deviceAspectRatio | |
minDeviceAspectRatio | |
maxDeviceAspectRatio | |
deviceHeight | |
minDeviceHeight | |
maxDeviceHeight | |
deviceWidth | |
minDeviceWidth | |
maxDeviceWidth | |
height | |
minHeight | |
maxHeight | |
monochrome | |
minMonochrome | |
maxMonochrome | |
orientation | |
resolution | |
minResolution | |
maxResolution | |
scan | |
width | |
minWidth | |
maxWidth |
Неподдерживаемые match поля
Устаревшие типы |
---|
braille |
embossed |
handheld |
projection |
tty |
tv |