react-micro-match-media/dist/esm/react-micro-match-media.js

> zero dependencies, ~1kb render prop wrapper of window.matchMedia

import React from 'react';

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

var MatchMedia = function (_React$Component) {
  inherits(MatchMedia, _React$Component);

  function MatchMedia() {
    var _ref;

    var _temp, _this, _ret;

    classCallCheck(this, MatchMedia);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = MatchMedia.__proto__ || Object.getPrototypeOf(MatchMedia)).call.apply(_ref, [this].concat(args))), _this), _this.canUseDOM = !!(typeof window !== 'undefined'), _this.state = {
      query: _this.props.query,
      matches: _this.canUseDOM ? window.matchMedia(_this.props.query).matches : false
    }, _this.matchMediaListener = function (_ref2) {
      var matches = _ref2.matches;

      _this.setState({ matches: matches });
    }, _temp), possibleConstructorReturn(_this, _ret);
  }

  createClass(MatchMedia, [{
    key: 'addListener',
    value: function addListener(query) {
      window.matchMedia(query).addListener(this.matchMediaListener);
    }
  }, {
    key: 'removeListener',
    value: function removeListener(query) {
      window.matchMedia(query).removeListener(this.matchMediaListener);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      var query = this.state.query;


      if (prevState.query !== query) {
        this.removeListener(query);
        this.addListener(query);
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.addListener(this.props.query);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.removeListener(this.props.query);
    }
  }, {
    key: 'render',
    value: function render() {
      return this.props.children(this.state.matches);
    }
  }], [{
    key: 'getDerivedStateFromProps',
    value: function getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.query !== prevState.query) {
        return {
          query: nextProps.query,
          matches: window.matchMedia(nextProps.query).matches
        };
      }

      return null;
    }
  }]);
  return MatchMedia;
}(React.Component);

export default MatchMedia;