@w11r/use-breakpoint/dist/cjs/index.js

React useBreakpoint hook to have different values for a variable based on a breakpoints.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {
  UP: true,
  DOWN: true,
  LANDSCAPE: true,
  PORTRAIT: true,
  LIGHT: true,
  DARK: true,
  options: true,
  setup: true,
  breakpoints: true,
  useResize: true,
  mediaQuery: true
};
Object.defineProperty(exports, "useResize", {
  enumerable: true,
  get: function get() {
    return _useResize.default;
  }
});
Object.defineProperty(exports, "mediaQuery", {
  enumerable: true,
  get: function get() {
    return _mediaQuery.default;
  }
});
exports.default = exports.breakpoints = exports.setup = exports.options = exports.DARK = exports.LIGHT = exports.PORTRAIT = exports.LANDSCAPE = exports.DOWN = exports.UP = void 0;

var _useBreakpoint = _interopRequireDefault(require("./useBreakpoint"));

var _useResize = _interopRequireDefault(require("./useResize"));

var _mediaQuery = _interopRequireDefault(require("./mediaQuery"));

var _provider = require("./provider");

Object.keys(_provider).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _provider[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _provider[key];
    }
  });
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var UP = '+';
exports.UP = UP;
var DOWN = '-';
exports.DOWN = DOWN;
var LANDSCAPE = '-';
exports.LANDSCAPE = LANDSCAPE;
var PORTRAIT = '|';
exports.PORTRAIT = PORTRAIT;
var LIGHT = '(';
exports.LIGHT = LIGHT;
var DARK = ')';
exports.DARK = DARK;
var options;
exports.options = options;

var setup = function setup(opts) {
  Object.entries(opts.breakpoints).forEach((_ref) => {
    var [name, [from, to]] = _ref;
    return [['', [from, to]], [UP, [from, 10000]], [DOWN, [0, to]]].forEach((_ref2) => {
      var [symbol, fromTo] = _ref2;
      return ['', LANDSCAPE, PORTRAIT, LIGHT, DARK].forEach(prefix => {
        // eslint-disable-next-line
        opts.breakpoints["".concat(prefix).concat(name).concat(symbol)] = fromTo;
      });
    });
  }); // Only-prefix support

  _extends(opts.breakpoints, {
    [LANDSCAPE]: [true],
    [PORTRAIT]: [true],
    [LIGHT]: [true],
    [DARK]: [true]
  });

  exports.options = options = opts;
};

exports.setup = setup;
var breakpoints = {
  micro: [0, 375],
  mi: [0, 375],
  mobile: [376, 639],
  m: [376, 639],
  tablet: [640, 1023],
  t: [640, 1023],
  small: [1024, 1439],
  s: [1024, 1439],
  medium: [1440, 1919],
  med: [1440, 1919],
  large: [1920, 10000],
  l: [1920, 10000],
  // Multi range
  device: [0, 1023],
  d: [0, 1023],
  smallDevice: [0, 639],
  sd: [0, 639]
};
exports.breakpoints = breakpoints;
var shorthands = {
  dark: '@media screen and (prefers-color-scheme: dark)',
  light: '@media screen and (prefers-color-scheme: light)',
  hdpi: '@media screen and (min-resolution: 192dpi)'
};
setup({
  breakpoints,
  shorthands
});
var _default = _useBreakpoint.default;
exports.default = _default;