mq-props

Media Query Props

INSTALL

yarn add mq-props

USAGE

mqProps(sizes: Array<MediaQuery: string>)(property: string)(value: string)

Basic

import mqProps from 'mq-props';
 
// Set your media queries
const SIZES = ['min-width: 320px', 'min-width: 480px', 'min-width: 768px'];
 
// pass them to mq-props
const sized = mqProps(SIZES);
 
sized('color')([
  'cyan',
  'magenta',
  'yellow',
  'black'
]);
 
/**
 * returns:
 *  {
 *   color: 'cyan',
 *   '@media (min-width: 320px)': {
 *     propertyToSet: 'magenta'
 *   },
 *   '@media (min-width: 480px)': {
 *     propertyToSet: 'yellow'
 *   },
 *   '@media (min-width: 768px)': {
 *     propertyToSet: 'black'
 *   }
 * };
 *
 **/

Skipping a value

import mqProps from 'mq-props';
 
// Set your media queries
const SIZES = ['min-width: 320px', 'min-width: 480px', 'min-width: 768px'];
 
// pass them to mq-props
const sized = mqProps(SIZES);
 
sized('color')([
  'cyan',
  null,
  'yellow',
  'black'
]);
 
/**
 * returns:
 *  {
 *   color: 'cyan',
 *   '@media (min-width: 480px)': {
 *     propertyToSet: 'yellow'
 *   },
 *   '@media (min-width: 768px)': {
 *     propertyToSet: 'black'
 *   }
 * };
 *
 **/