@divyanshu013/media
v1.0.0
Published
Simplify media queries for CSS in JS
Downloads
18
Readme
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.