create media query style props from an array of values and a property
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore
.nvmrc
.travis.yml
README.md
dist.js
index.js
package.json
test.js
yarn.lock

README.md

Build Status Coverage Status

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'
 *   }
 * };
 *
 **/