Easy Media In Js

Demo

👀 Demo Sandbox

Descrition

Working with media queries can be a mess, to solve the problem I created this small library based on the ideas included in the Google's Material Design Design system, in an effort to handle the most common breakpoint sizes. This library works exclusively with CSS-in-JS solutions, such as Emotion and Styled Components.

This image shows the some possible breakpoints based on real devices.

Well, it's imposible to cover all the the use cases. Based on this guide a few widely used breakpoints were chosen:

const sizes = {
  smallPhone: 300, // To Handle with phones like Iphone 5S
  phone: 600,
  tablet: 960,
  desktop: 1280,
  largeDesktop: 1600,
};

You can override the rules or create your own, just use setSizes().

import { useMedia, setSizes } from "easy-media-in-js";
// Use With Emotion
import styled from "@emotion/styled";
// Use With Styled Components
import styled from "styled-components";

setSites({
  smallPhone: 300, // To Handle phones like Iphone 5S
  phone: 600,
  tablet: 960,
  desktop: 1280,
  largeDesktop: 1600,
  customBreakpoint: 1800,
});

// and use it like this:

const Element = styled.div`
  ${useMedia("customBreapoint")} {
    [css property] : [property value];
  }
`;

Install

Yarn

  yarn add easy-media-in-js

NPM

  npm install easy-media-in-js --save-dev

Usage

Import the modules inside your file:

import { useMedia } from "easy-media-in-js";
// Use With Emotion
import styled from "@emotion/styled";
// Use With Styled Components
import styled from "styled-components";

const Element = styled.div`
  ${useMedia("phone")} {
    border: 1px solid red;
  }
`;

Output

@media (min-width: 600px) {
  border: 1px solid red;
}

Possibilities

import { useMedia } from "easy-media-in-js";
// Use With Emotion
import styled from "@emotion/styled";
// Use With Styled Components
import styled from "styled-components";

const Element = styled.div`
  ${useMedia("<= phone")} {
    border: 1px solid red;
  }

  ${useMedia("phone")} {
    border: 1px solid red;
  }

  ${useMedia("phone  < tablet")} {
    border: 1px solid red;
  }
  ${useMedia("phone  < tablet < desktop < largeDesktop")} {
    border: 1px solid red;
  }
`;

Outputs:

@media (max-width: 599px) {
  border: 1px solid red;
}

@media (min-width: 600px) {
  border: 1px solid red;
}

@media (min-width: 600px) and (min-width: 960px) {
  border: 1px solid red;
}

@media (min-width: 600px) and (min-width: 960px) and (min-width: 1600px) {
  border: 1px solid red;
}