Helper for CSS-In-JS Media Query integration on Components

css-in-js-breakpoints.js

/**
 * Helper for CSS-In-JS Media Query integration on Components
 *
 * Usage:
 *  // It's using `styled-components` package, but it can be used in any CSS-IN-JS package solution
 *
 *  import styled from 'styled-components';
 *.
 *. const MyDiv = styled.div`
      display: inline-block;
      position: absolute;
      right: 0;

      ${screen.md} {
        display: block;
      }
    `;
 */

// Screen sizes used in your app
const sizes = {
  sm: '320px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
};

// Breakpoints based on your configuration
export const breakpoints = {
  sm: `@media (min-width: ${sizes.sm})`,
  md: `@media (min-width: ${sizes.md})`,
  lg: `@media (min-width: ${sizes.lg})`,
  xl: `@media (min-width: ${sizes.xl})`,
  max: `${sizes.xlg}`,
};