react-queries

Реакт компонент для управления медиа запросами

Язык документации: Русский, English

Как установить

Если используете npm: npm install react-queries

Если используете yarn: yarn add react-queries

Как использовать

Простой

import React from 'react';
import Query from 'react-queries';

const Example = () => (
  <Query
    match={{
      type: 'screen',
      minWidth: 600,
      maxWidth: 1200,
    }}
  >
    Какой-то контент
  </Query>
);

Отобразится как @media:

@media screen and (min-width: 600px) and (max-width: 1200px)

Расширенный

import React from 'react';
import Query from 'react-queries';

const Example = () => (
  <Query
    match={{
      minWidth: ['screen', 600],
      maxWidth: ['print', 1200],
    }}
  >
    Какой-то контент
  </Query>
);

Отобразится как @media:

@media screen and (min-width: 600px), print and (max-width: 1200px)

Пропсы

| Поле | Тип | Обязательно | |-------|-----------------|-------------| | match | Shape(Matches)¹ | Да |

¹Matches

| Поле | Тип | Описание | |-----------------------|------------------|---------------------------------------------| | type | строка | Один из поддерживаемых типов² (опционально) | | [запрос из запросов]³ | строка | число | [type²: строка, query³: строка | число] | Один из поддерживаемых запросов³. В расширенном использовании - поле является обязательным вместе с типом и запросом, но нельзя использовать поле типа отдельно |

Поддерживаемые match поля

| Типы² | Запросы³ | |---------|----------------------| | all | aspectRatio | | print | 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 |