@fluent-windows/core/es/styles/createBreakpoint.js

React components that inspired by Microsoft's Fluent Design System.

import { deepMerge } from '../utils';
export const defaultBreakpoints = ['600px', '960px', '1280px', '1920px'];

function createBreakpoint(breakpoints) {
  const _breakpoints = deepMerge(defaultBreakpoints, breakpoints);

  _breakpoints.sm = `@media screen and (min-width: ${defaultBreakpoints[0]})`;
  _breakpoints.md = `@media screen and (min-width: ${defaultBreakpoints[1]})`;
  _breakpoints.lg = `@media screen and (min-width: ${defaultBreakpoints[2]})`;
  _breakpoints.xl = `@media screen and (min-width: ${defaultBreakpoints[3]})`;
  return _breakpoints;
}

export default createBreakpoint;