@kiwicom/orbit-components/es/utils/mediaQuery/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import { css } from "styled-components";
import { QUERIES } from "./consts";
const TOKEN = {
  mediumMobile: "widthBreakpointMediumMobile",
  largeMobile: "widthBreakpointLargeMobile",
  tablet: "widthBreakpointTablet",
  desktop: "widthBreakpointDesktop",
  largeDesktop: "widthBreakpointLargeDesktop"
};
export const getBreakpointWidth = (name, theme, pure) => {
  // $FlowFixMe not sure how to solve this aspect of overloading functions 🤷‍♂️
  return pure ? theme.orbit[TOKEN[name]] : `(min-width: ${theme.orbit[TOKEN[name]]}px)`;
}; // https://davidwalsh.name/flow-object-values

const devices = [...Object.values(QUERIES)];
const mediaQueries = devices.reduce((acc, device) => {
  acc[device] = style => css(["@media ", "{", ";}"], ({
    theme
  }) => getBreakpointWidth(device, theme), style);

  return acc;
}, {});
export default mediaQueries;