https://github.com/divyanshu013/media

Simplify media queries for CSS in JS 💃
https://github.com/divyanshu013/media

css-in-js media-queries

Last synced: 3 months ago
JSON representation

Simplify media queries for CSS in JS 💃

• Host: GitHub
• URL: https://github.com/divyanshu013/media
• Owner: divyanshu013
• License: mit
• Created: 2018-06-09T07:16:11.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-19T21:11:16.000Z (almost 7 years ago)
• Last Synced: 2025-01-24T00:28:54.611Z (5 months ago)
• Topics: css-in-js, media-queries
• Language: JavaScript
• Homepage: https://divyanshu013.github.io/media/
• Size: 365 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  @divyanshu013/media 💃

  


  


  

    

  

  




Simplify media queries for CSS in JS


![NpmVersion](https://img.shields.io/npm/v/@divyanshu013/media.svg)

![bundle size](https://img.shields.io/bundlephobia/minzip/@divyanshu013/media.svg)

[![Maintainability](https://api.codeclimate.com/v1/badges/9aff1f460c5e257f0519/maintainability)](https://codeclimate.com/github/divyanshu013/media/maintainability)

[![codecov](https://codecov.io/gh/divyanshu013/media/branch/master/graph/badge.svg)](https://codecov.io/gh/divyanshu013/media)

[![Build Status](https://travis-ci.org/divyanshu013/media.svg?branch=master)](https://travis-ci.org/divyanshu013/media)

[![jest](https://facebook.github.io/jest/img/jest-badge.svg)](https://github.com/facebook/jest)

![Downloads](https://img.shields.io/npm/dt/@divyanshu013/media.svg)

# Install

```bash

yarn add @divyanshu013/media

```

# Usage

## breakpoints

```js

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

// default breakpoints

console.log(breakpoints);

/*

{

  xsmall: 420,

  small: 576,

  medium: 768,

  large: 992,

  xlarge: 1200,

}

*/

```

## min-width query

```js

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

import { css } from 'react-emotion';

const styles = css({

  [mediaMin.medium]: {

    fontSize: '1.2rem',

  },

});

```

## max-width query

```js

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

import { css } from 'react-emotion';

const styles = css({

  [mediaMax.medium]: {

    fontSize: '0.9rem',

  },

});

```

## create

```js

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 😛).

```js

const media1 = {...};

const media2 = {...};

const mediaQ = compose(media1, media2);

// now use mediaQ

```

# Inspiration

This library is inspired by [emotion](https://github.com/emotion-js/emotion) and [facepaint](https://github.com/emotion-js/facepaint).

Logo from [EmojiOne](https://www.emojione.com/emoji/1f483).