react-queries v0.3.1

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)

Пропсы

¹Matches

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

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