@divyanshu013/media

@divyanshu013/media 💃

Simplify media queries for CSS in JS

Install

yarn add @divyanshu013/media

Usage

breakpoints

import { breakpoints } from '@divyanshu013/media';

// default breakpoints
console.log(breakpoints);
/*
{
  xsmall: 420,
  small: 576,
  medium: 768,
  large: 992,
  xlarge: 1200,
}
*/

min-width query

import { mediaMin } from '@divyanshu013/media';
import { css } from 'react-emotion';

const styles = css({
  [mediaMin.medium]: {
    fontSize: '1.2rem',
  },
});

max-width query

import { mediaMax } from '@divyanshu013/media';
import { css } from 'react-emotion';

const styles = css({
  [mediaMax.medium]: {
    fontSize: '0.9rem',
  },
});

create

import { create } from '@divyanshu013/media';

const breakpoints = {
  md: 768,
  xxl: 1600,
};

const mediaQMax = create(breakpoints, 'max');
const mediaQMin = create(breakpoints, 'min');

compose

Just like Object.assign. (Actually its just Object.assign 😛).

const media1 = {...};
const media2 = {...};

const mediaQ = compose(media1, media2);

// now use mediaQ

Inspiration

This library is inspired by emotion and facepaint.

Logo from EmojiOne.