Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

create media query style props from an array of values and a property

Resources

Packages

No packages published