Skip to content

VinSpee/mq-props

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Stars

Watchers

Forks

Packages

No packages published