yukioru / react-queries

React component for manipulate media queries

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