🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-sizeme

Package Overview
Dependencies
Maintainers
1
Versions
55
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sizeme - npm Package Compare versions

Comparing version

2.6.10
to
2.6.11

519

dist/react-sizeme.js

@@ -5,3 +5,2 @@ 'use strict';

var createResizeDetector = _interopDefault(require('element-resize-detector'));
var React = require('react');

@@ -13,52 +12,88 @@ var React__default = _interopDefault(React);

var throttleDebounce = require('throttle-debounce');
var createResizeDetector = _interopDefault(require('element-resize-detector'));
var isShallowEqual = _interopDefault(require('shallowequal'));
var instances = {};
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
// Lazily require to not cause bug
// https://github.com/ctrlplusb/react-sizeme/issues/6
function resizeDetector() {
var strategy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'scroll';
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);
}
}
if (!instances[strategy]) {
instances[strategy] = createResizeDetector({
strategy: strategy
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return instances[strategy];
return obj;
}
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
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);
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
return target;
};
}();
var _extends = Object.assign || function (target) {
return _extends.apply(this, arguments);
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
var source = arguments[i] != null ? arguments[i] : {};
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}

@@ -68,7 +103,7 @@ }

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

@@ -79,3 +114,2 @@

value: subClass,
enumerable: false,
writable: true,

@@ -85,29 +119,89 @@ configurable: true

});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
if (superClass) _setPrototypeOf(subClass, superClass);
}
var objectWithoutProperties = function (obj, keys) {
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
};
}
var possibleConstructorReturn = function (self, call) {
if (!self) {
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
return self;
}
/* eslint-disable react/no-multi-comp */
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
var instances = {}; // Lazily require to not cause bug
// https://github.com/ctrlplusb/react-sizeme/issues/6
function resizeDetector() {
var strategy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'scroll';
if (!instances[strategy]) {
instances[strategy] = createResizeDetector({
strategy: strategy
});
}
return instances[strategy];
}
var errMsg = 'react-sizeme: an error occurred whilst stopping to listen to node size changes';
var defaultConfig = {

@@ -126,3 +220,2 @@ monitorWidth: true,

}
/**

@@ -134,12 +227,16 @@ * This is a utility wrapper component that will allow our higher order

var ReferenceWrapper = function (_Component) {
inherits(ReferenceWrapper, _Component);
var ReferenceWrapper =
/*#__PURE__*/
function (_Component) {
_inherits(ReferenceWrapper, _Component);
function ReferenceWrapper() {
classCallCheck(this, ReferenceWrapper);
return possibleConstructorReturn(this, (ReferenceWrapper.__proto__ || Object.getPrototypeOf(ReferenceWrapper)).apply(this, arguments));
_classCallCheck(this, ReferenceWrapper);
return _possibleConstructorReturn(this, _getPrototypeOf(ReferenceWrapper).apply(this, arguments));
}
createClass(ReferenceWrapper, [{
key: 'render',
_createClass(ReferenceWrapper, [{
key: "render",
value: function render() {

@@ -149,8 +246,11 @@ return React.Children.only(this.props.children);

}]);
return ReferenceWrapper;
}(React.Component);
ReferenceWrapper.displayName = 'SizeMeReferenceWrapper';
_defineProperty(ReferenceWrapper, "displayName", 'SizeMeReferenceWrapper');
ReferenceWrapper.propTypes = { children: PropTypes.element.isRequired };
ReferenceWrapper.propTypes = {
children: PropTypes.element.isRequired
};

@@ -160,10 +260,11 @@ function Placeholder(_ref) {

style = _ref.style;
// Lets create the props for the temp element.
var phProps = {};
var phProps = {}; // We will use any provided className/style or else make the temp
// container take the full available space.
// We will use any provided className/style or else make the temp
// container take the full available space.
if (!className && !style) {
phProps.style = { width: '100%', height: '100%' };
phProps.style = {
width: '100%',
height: '100%'
};
} else {

@@ -173,2 +274,3 @@ if (className) {

}
if (style) {

@@ -179,4 +281,5 @@ phProps.style = style;

return React__default.createElement('div', phProps);
return React__default.createElement("div", phProps);
}
Placeholder.displayName = 'SizeMePlaceholder';

@@ -186,11 +289,12 @@ Placeholder.propTypes = {

style: PropTypes.object
};
/**
* As we need to maintain a ref on the root node that is rendered within our
* SizeMe component we need to wrap our entire render in a sub component.
* Without this, we lose the DOM ref after the placeholder is removed from
* the render and the actual component is rendered.
* It took me forever to figure this out, so tread extra careful on this one!
*/
/**
* As we need to maintain a ref on the root node that is rendered within our
* SizeMe component we need to wrap our entire render in a sub component.
* Without this, we lose the DOM ref after the placeholder is removed from
* the render and the actual component is rendered.
* It took me forever to figure this out, so tread extra careful on this one!
*/
};var renderWrapper = function renderWrapper(WrappedComponent) {
var renderWrapper = function renderWrapper(WrappedComponent) {
function SizeMeRenderer(props) {

@@ -203,9 +307,6 @@ var explicitRef = props.explicitRef,

onSize = props.onSize,
restProps = objectWithoutProperties(props, ['explicitRef', 'className', 'style', 'size', 'disablePlaceholder', 'onSize']);
restProps = _objectWithoutProperties(props, ["explicitRef", "className", "style", "size", "disablePlaceholder", "onSize"]);
var noSizeData = size == null || size.width == null && size.height == null && size.position == null;
var renderPlaceholder = noSizeData && !disablePlaceholder;
var renderProps = {

@@ -220,20 +321,22 @@ className: className,

var toRender = renderPlaceholder ? React__default.createElement(Placeholder, { className: className, style: style }) : React__default.createElement(WrappedComponent, _extends({}, renderProps, restProps));
return React__default.createElement(
ReferenceWrapper,
{ ref: explicitRef },
toRender
);
var toRender = renderPlaceholder ? React__default.createElement(Placeholder, {
className: className,
style: style
}) : React__default.createElement(WrappedComponent, _extends({}, renderProps, restProps));
return React__default.createElement(ReferenceWrapper, {
ref: explicitRef
}, toRender);
}
SizeMeRenderer.displayName = 'SizeMeRenderer(' + getDisplayName(WrappedComponent) + ')';
SizeMeRenderer.displayName = "SizeMeRenderer(".concat(getDisplayName(WrappedComponent), ")");
SizeMeRenderer.propTypes = {
explicitRef: PropTypes.func.isRequired,
className: PropTypes.string,
style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
style: PropTypes.object,
// eslint-disable-line react/forbid-prop-types
size: PropTypes.shape({
width: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
height: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
width: PropTypes.number,
// eslint-disable-line react/no-unused-prop-types
height: PropTypes.number,
// eslint-disable-line react/no-unused-prop-types
position: PropTypes.object

@@ -244,6 +347,4 @@ }),

};
return SizeMeRenderer;
};
/**

@@ -264,53 +365,57 @@ * :: config -> Component -> WrappedComponent

*/
function withSize() {
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig;
var _config$monitorWidth = config.monitorWidth,
monitorWidth = _config$monitorWidth === undefined ? defaultConfig.monitorWidth : _config$monitorWidth,
monitorWidth = _config$monitorWidth === void 0 ? defaultConfig.monitorWidth : _config$monitorWidth,
_config$monitorHeight = config.monitorHeight,
monitorHeight = _config$monitorHeight === undefined ? defaultConfig.monitorHeight : _config$monitorHeight,
monitorHeight = _config$monitorHeight === void 0 ? defaultConfig.monitorHeight : _config$monitorHeight,
_config$monitorPositi = config.monitorPosition,
monitorPosition = _config$monitorPositi === undefined ? defaultConfig.monitorPosition : _config$monitorPositi,
monitorPosition = _config$monitorPositi === void 0 ? defaultConfig.monitorPosition : _config$monitorPositi,
_config$refreshRate = config.refreshRate,
refreshRate = _config$refreshRate === undefined ? defaultConfig.refreshRate : _config$refreshRate,
refreshRate = _config$refreshRate === void 0 ? defaultConfig.refreshRate : _config$refreshRate,
_config$refreshMode = config.refreshMode,
refreshMode = _config$refreshMode === undefined ? defaultConfig.refreshMode : _config$refreshMode,
refreshMode = _config$refreshMode === void 0 ? defaultConfig.refreshMode : _config$refreshMode,
_config$noPlaceholder = config.noPlaceholder,
noPlaceholder = _config$noPlaceholder === undefined ? defaultConfig.noPlaceholder : _config$noPlaceholder,
noPlaceholder = _config$noPlaceholder === void 0 ? defaultConfig.noPlaceholder : _config$noPlaceholder,
_config$resizeDetecto = config.resizeDetectorStrategy,
resizeDetectorStrategy = _config$resizeDetecto === undefined ? defaultConfig.resizeDetectorStrategy : _config$resizeDetecto;
resizeDetectorStrategy = _config$resizeDetecto === void 0 ? defaultConfig.resizeDetectorStrategy : _config$resizeDetecto;
invariant(monitorWidth || monitorHeight || monitorPosition, 'You have to monitor at least one of the width, height, or position when using "sizeMe"');
invariant(refreshRate >= 16, "It is highly recommended that you don't put your refreshRate lower than " + '16 as this may cause layout thrashing.');
invariant(refreshMode === 'throttle' || refreshMode === 'debounce', 'The refreshMode should have a value of "throttle" or "debounce"');
var refreshDelayStrategy = refreshMode === 'throttle' ? throttleDebounce.throttle : throttleDebounce.debounce;
return function WrapComponent(WrappedComponent) {
var SizeMeRenderWrapper = renderWrapper(WrappedComponent);
var SizeAwareComponent = function (_React$Component) {
inherits(SizeAwareComponent, _React$Component);
var SizeAwareComponent =
/*#__PURE__*/
function (_React$Component) {
_inherits(SizeAwareComponent, _React$Component);
function SizeAwareComponent() {
var _ref2;
var _getPrototypeOf2;
var _temp, _this2, _ret;
var _this;
classCallCheck(this, SizeAwareComponent);
_classCallCheck(this, SizeAwareComponent);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this2 = possibleConstructorReturn(this, (_ref2 = SizeAwareComponent.__proto__ || Object.getPrototypeOf(SizeAwareComponent)).call.apply(_ref2, [this].concat(args))), _this2), _this2.domEl = null, _this2.state = {
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SizeAwareComponent)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "domEl", null);
_defineProperty(_assertThisInitialized(_this), "state", {
width: undefined,
height: undefined,
position: undefined
}, _this2.uninstall = function () {
if (_this2.domEl) {
});
_defineProperty(_assertThisInitialized(_this), "uninstall", function () {
if (_this.domEl) {
try {
_this2.detector.uninstall(_this2.domEl);
_this.detector.uninstall(_this.domEl);
} catch (err) {

@@ -320,24 +425,38 @@ // eslint-disable-next-line no-console

}
_this2.domEl = null;
_this.domEl = null;
}
}, _this2.determineStrategy = function (props) {
});
_defineProperty(_assertThisInitialized(_this), "determineStrategy", function (props) {
if (props.onSize) {
if (!_this2.callbackState) {
_this2.callbackState = _extends({}, _this2.state);
if (!_this.callbackState) {
_this.callbackState = _objectSpread2({}, _this.state);
}
_this2.strategy = 'callback';
_this.strategy = 'callback';
} else {
_this2.strategy = 'render';
_this.strategy = 'render';
}
}, _this2.strategisedSetState = function (state) {
if (_this2.strategy === 'callback') {
_this2.callbackState = state;
_this2.props.onSize(state);
});
_defineProperty(_assertThisInitialized(_this), "strategisedSetState", function (state) {
if (_this.strategy === 'callback') {
_this.callbackState = state;
_this.props.onSize(state);
}
_this2.setState(state);
}, _this2.strategisedGetState = function () {
return _this2.strategy === 'callback' ? _this2.callbackState : _this2.state;
}, _this2.refCallback = function (element) {
_this2.element = element;
}, _this2.hasSizeChanged = function (current, next) {
_this.setState(state);
});
_defineProperty(_assertThisInitialized(_this), "strategisedGetState", function () {
return _this.strategy === 'callback' ? _this.callbackState : _this.state;
});
_defineProperty(_assertThisInitialized(_this), "refCallback", function (element) {
_this.element = element;
});
_defineProperty(_assertThisInitialized(_this), "hasSizeChanged", function (current, next) {
var c = current;

@@ -347,5 +466,6 @@ var n = next;

var np = n.position || {};
return monitorWidth && c.width !== n.width || monitorHeight && c.height !== n.height || monitorPosition && (cp.top !== np.top || cp.left !== np.left || cp.bottom !== np.bottom || cp.right !== np.right);
});
return monitorWidth && c.width !== n.width || monitorHeight && c.height !== n.height || monitorPosition && (cp.top !== np.top || cp.left !== np.left || cp.bottom !== np.bottom || cp.right !== np.right);
}, _this2.checkIfSizeChanged = refreshDelayStrategy(refreshRate, function (el) {
_defineProperty(_assertThisInitialized(_this), "checkIfSizeChanged", refreshDelayStrategy(refreshRate, function (el) {
var _el$getBoundingClient = el.getBoundingClientRect(),

@@ -362,13 +482,20 @@ width = _el$getBoundingClient.width,

height: monitorHeight ? height : null,
position: monitorPosition ? { right: right, left: left, top: top, bottom: bottom } : null
position: monitorPosition ? {
right: right,
left: left,
top: top,
bottom: bottom
} : null
};
if (_this2.hasSizeChanged(_this2.strategisedGetState(), next)) {
_this2.strategisedSetState(next);
if (_this.hasSizeChanged(_this.strategisedGetState(), next)) {
_this.strategisedSetState(next);
}
}), _temp), possibleConstructorReturn(_this2, _ret);
}));
return _this;
}
createClass(SizeAwareComponent, [{
key: 'componentDidMount',
_createClass(SizeAwareComponent, [{
key: "componentDidMount",
value: function componentDidMount() {

@@ -380,3 +507,3 @@ this.detector = resizeDetector(resizeDetectorStrategy);

}, {
key: 'componentDidUpdate',
key: "componentDidUpdate",
value: function componentDidUpdate() {

@@ -387,3 +514,3 @@ this.determineStrategy(this.props);

}, {
key: 'componentWillUnmount',
key: "componentWillUnmount",
value: function componentWillUnmount() {

@@ -395,9 +522,11 @@ // Change our size checker to a noop just in case we have some

};
this.checkIfSizeChanged = function () {
return undefined;
};
this.uninstall();
}
}, {
key: 'handleDOMNode',
key: "handleDOMNode",
value: function handleDOMNode() {

@@ -423,7 +552,7 @@ var found = this.element && ReactDOM.findDOMNode(this.element);

}, {
key: 'render',
key: "render",
value: function render() {
var disablePlaceholder = withSize.enableSSRBehaviour || withSize.noPlaceholders || noPlaceholder || this.strategy === 'callback';
var size = _extends({}, this.state);
var size = _objectSpread2({}, this.state);

@@ -437,17 +566,16 @@ return React__default.createElement(SizeMeRenderWrapper, _extends({

}]);
return SizeAwareComponent;
}(React__default.Component);
SizeAwareComponent.displayName = 'SizeMe(' + getDisplayName(WrappedComponent) + ')';
SizeAwareComponent.propTypes = {
_defineProperty(SizeAwareComponent, "displayName", "SizeMe(".concat(getDisplayName(WrappedComponent), ")"));
_defineProperty(SizeAwareComponent, "propTypes", {
onSize: PropTypes.func
};
});
SizeAwareComponent.WrappedComponent = WrappedComponent;
return SizeAwareComponent;
};
}
/**

@@ -463,4 +591,5 @@ * Allow SizeMe to run within SSR environments. This is a "global" behaviour

*/
withSize.enableSSRBehaviour = false;
/**

@@ -470,19 +599,36 @@ * Global configuration allowing to disable placeholder rendering for all

*/
withSize.noPlaceholders = false;
var SizeMe = function (_Component) {
inherits(SizeMe, _Component);
var SizeMe =
/*#__PURE__*/
function (_Component) {
_inherits(SizeMe, _Component);
function SizeMe(props) {
classCallCheck(this, SizeMe);
var _this;
var _this = possibleConstructorReturn(this, (SizeMe.__proto__ || Object.getPrototypeOf(SizeMe)).call(this, props));
_classCallCheck(this, SizeMe);
_initialiseProps.call(_this);
_this = _possibleConstructorReturn(this, _getPrototypeOf(SizeMe).call(this, props));
var children = props.children,
_defineProperty(_assertThisInitialized(_this), "createComponent", function (config) {
_this.SizeAware = withSize(config)(function (_ref) {
var children = _ref.children;
return children;
});
});
_defineProperty(_assertThisInitialized(_this), "onSize", function (size) {
return _this.setState({
size: size
});
});
var _children = props.children,
render = props.render,
sizeMeConfig = objectWithoutProperties(props, ['children', 'render']);
sizeMeConfig = _objectWithoutProperties(props, ["children", "render"]);
_this.createComponent(sizeMeConfig);
_this.state = {

@@ -497,12 +643,13 @@ size: {

createClass(SizeMe, [{
key: 'componentDidUpdate',
_createClass(SizeMe, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _props = this.props,
prevChildren = _props.children,
prevRender = _props.render,
currentSizeMeConfig = objectWithoutProperties(_props, ['children', 'render']);
var _this$props = this.props,
prevChildren = _this$props.children,
prevRender = _this$props.render,
currentSizeMeConfig = _objectWithoutProperties(_this$props, ["children", "render"]);
var nextChildren = prevProps.children,
nextRender = prevProps.render,
prevSizeMeConfig = objectWithoutProperties(prevProps, ['children', 'render']);
prevSizeMeConfig = _objectWithoutProperties(prevProps, ["children", "render"]);

@@ -514,41 +661,27 @@ if (!isShallowEqual(currentSizeMeConfig, prevSizeMeConfig)) {

}, {
key: 'render',
key: "render",
value: function render() {
var SizeAware = this.SizeAware;
var render = this.props.children || this.props.render;
return React__default.createElement(
SizeAware,
{ onSize: this.onSize },
render({ size: this.state.size })
);
return React__default.createElement(SizeAware, {
onSize: this.onSize
}, render({
size: this.state.size
}));
}
}]);
return SizeMe;
}(React.Component);
SizeMe.propTypes = {
_defineProperty(SizeMe, "propTypes", {
children: PropTypes.func,
render: PropTypes.func
};
SizeMe.defaultProps = {
});
_defineProperty(SizeMe, "defaultProps", {
children: undefined,
render: undefined
};
});
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.createComponent = function (config) {
_this2.SizeAware = withSize(config)(function (_ref) {
var children = _ref.children;
return children;
});
};
this.onSize = function (size) {
return _this2.setState({ size: size });
};
};
withSize.SizeMe = SizeMe;

@@ -555,0 +688,0 @@ withSize.withSize = withSize;

2

dist/react-sizeme.min.js

@@ -1,2 +0,2 @@

"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var createResizeDetector=_interopDefault(require("element-resize-detector")),React=require("react"),React__default=_interopDefault(React),PropTypes=_interopDefault(require("prop-types")),ReactDOM=_interopDefault(require("react-dom")),invariant=_interopDefault(require("invariant")),throttleDebounce=require("throttle-debounce"),isShallowEqual=_interopDefault(require("shallowequal")),instances={};function resizeDetector(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"scroll";return instances[e]||(instances[e]=createResizeDetector({strategy:e})),instances[e]}var classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function i(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e}}(),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},objectWithoutProperties=function(e,t){var r={};for(var i in e)0<=t.indexOf(i)||Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i]);return r},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},errMsg="react-sizeme: an error occurred whilst stopping to listen to node size changes",defaultConfig={monitorWidth:!0,monitorHeight:!1,monitorPosition:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(e){function t(){return classCallCheck(this,t),possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return inherits(t,e),createClass(t,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),t}(React.Component);function Placeholder(e){var t=e.className,r=e.style,i={};return t||r?(t&&(i.className=t),r&&(i.style=r)):i.style={width:"100%",height:"100%"},React__default.createElement("div",i)}ReferenceWrapper.displayName="SizeMeReferenceWrapper",ReferenceWrapper.propTypes={children:PropTypes.element.isRequired},Placeholder.displayName="SizeMePlaceholder",Placeholder.propTypes={className:PropTypes.string,style:PropTypes.object};var renderWrapper=function(h){function e(e){var t=e.explicitRef,r=e.className,i=e.style,o=e.size,n=e.disablePlaceholder,a=(e.onSize,objectWithoutProperties(e,["explicitRef","className","style","size","disablePlaceholder","onSize"])),s=(null==o||null==o.width&&null==o.height&&null==o.position)&&!n,l={className:r,style:i};null!=o&&(l.size=o);var c=s?React__default.createElement(Placeholder,{className:r,style:i}):React__default.createElement(h,_extends({},l,a));return React__default.createElement(ReferenceWrapper,{ref:t},c)}return e.displayName="SizeMeRenderer("+getDisplayName(h)+")",e.propTypes={explicitRef:PropTypes.func.isRequired,className:PropTypes.string,style:PropTypes.object,size:PropTypes.shape({width:PropTypes.number,height:PropTypes.number,position:PropTypes.object}),disablePlaceholder:PropTypes.bool,onSize:PropTypes.func},e};function withSize(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,h=void 0===t?defaultConfig.monitorWidth:t,r=e.monitorHeight,u=void 0===r?defaultConfig.monitorHeight:r,i=e.monitorPosition,p=void 0===i?defaultConfig.monitorPosition:i,o=e.refreshRate,a=void 0===o?defaultConfig.refreshRate:o,n=e.refreshMode,s=void 0===n?defaultConfig.refreshMode:n,l=e.noPlaceholder,c=void 0===l?defaultConfig.noPlaceholder:l,d=e.resizeDetectorStrategy,f=void 0===d?defaultConfig.resizeDetectorStrategy:d;invariant(h||u||p,'You have to monitor at least one of the width, height, or position when using "sizeMe"'),invariant(16<=a,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant("throttle"===s||"debounce"===s,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===s?throttleDebounce.throttle:throttleDebounce.debounce;return function(e){var r=renderWrapper(e),t=function(e){function n(){var e,t,c;classCallCheck(this,n);for(var r=arguments.length,i=Array(r),o=0;o<r;o++)i[o]=arguments[o];return(t=c=possibleConstructorReturn(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(i)))).domEl=null,c.state={width:void 0,height:void 0,position:void 0},c.uninstall=function(){if(c.domEl){try{c.detector.uninstall(c.domEl)}catch(e){console.warn(errMsg)}c.domEl=null}},c.determineStrategy=function(e){e.onSize?(c.callbackState||(c.callbackState=_extends({},c.state)),c.strategy="callback"):c.strategy="render"},c.strategisedSetState=function(e){"callback"===c.strategy&&(c.callbackState=e,c.props.onSize(e)),c.setState(e)},c.strategisedGetState=function(){return"callback"===c.strategy?c.callbackState:c.state},c.refCallback=function(e){c.element=e},c.hasSizeChanged=function(e,t){var r=e,i=t,o=r.position||{},n=i.position||{};return h&&r.width!==i.width||u&&r.height!==i.height||p&&(o.top!==n.top||o.left!==n.left||o.bottom!==n.bottom||o.right!==n.right)},c.checkIfSizeChanged=y(a,function(e){var t=e.getBoundingClientRect(),r=t.width,i=t.height,o=t.right,n=t.left,a=t.top,s=t.bottom,l={width:h?r:null,height:u?i:null,position:p?{right:o,left:n,top:a,bottom:s}:null};c.hasSizeChanged(c.strategisedGetState(),l)&&c.strategisedSetState(l)}),possibleConstructorReturn(c,t)}return inherits(n,e),createClass(n,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(f),this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.uninstall()}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM.findDOMNode(this.element);e?this.domEl?(this.domEl.isSameNode&&!this.domEl.isSameNode(e)||this.domEl!==e)&&(this.uninstall(),this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):(this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):this.uninstall()}},{key:"render",value:function(){var e=withSize.enableSSRBehaviour||withSize.noPlaceholders||c||"callback"===this.strategy,t=_extends({},this.state);return React__default.createElement(r,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:t,disablePlaceholder:e},this.props))}}]),n}(React__default.Component);return t.displayName="SizeMe("+getDisplayName(e)+")",t.propTypes={onSize:PropTypes.func},t.WrappedComponent=e,t}}withSize.enableSSRBehaviour=!1,withSize.noPlaceholders=!1;var SizeMe=function(e){function i(e){classCallCheck(this,i);var t=possibleConstructorReturn(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,e));_initialiseProps.call(t);e.children,e.render;var r=objectWithoutProperties(e,["children","render"]);return t.createComponent(r),t.state={size:{width:void 0,height:void 0}},t}return inherits(i,e),createClass(i,[{key:"componentDidUpdate",value:function(e){var t=this.props,r=(t.children,t.render,objectWithoutProperties(t,["children","render"])),i=(e.children,e.render,objectWithoutProperties(e,["children","render"]));isShallowEqual(r,i)||this.createComponent(r)}},{key:"render",value:function(){var e=this.SizeAware,t=this.props.children||this.props.render;return React__default.createElement(e,{onSize:this.onSize},t({size:this.state.size}))}}]),i}(React.Component);SizeMe.propTypes={children:PropTypes.func,render:PropTypes.func},SizeMe.defaultProps={children:void 0,render:void 0};var _initialiseProps=function(){var t=this;this.createComponent=function(e){t.SizeAware=withSize(e)(function(e){return e.children})},this.onSize=function(e){return t.setState({size:e})}};withSize.SizeMe=SizeMe,withSize.withSize=withSize,module.exports=withSize;
"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React),PropTypes=_interopDefault(require("prop-types")),ReactDOM=_interopDefault(require("react-dom")),invariant=_interopDefault(require("invariant")),throttleDebounce=require("throttle-debounce"),createResizeDetector=_interopDefault(require("element-resize-detector")),isShallowEqual=_interopDefault(require("shallowequal"));function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e}).apply(this,arguments)}function ownKeys(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,i)}return r}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(r),!0).forEach(function(e){_defineProperty(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)r=o[i],0<=t.indexOf(r)||(n[r]=e[r]);return n}function _objectWithoutProperties(e,t){if(null==e)return{};var r,i,n=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)r=o[i],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}var instances={};function resizeDetector(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"scroll";return instances[e]||(instances[e]=createResizeDetector({strategy:e})),instances[e]}var errMsg="react-sizeme: an error occurred whilst stopping to listen to node size changes",defaultConfig={monitorWidth:!0,monitorHeight:!1,monitorPosition:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(){function e(){return _classCallCheck(this,e),_possibleConstructorReturn(this,_getPrototypeOf(e).apply(this,arguments))}return _inherits(e,React.Component),_createClass(e,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),e}();function Placeholder(e){var t=e.className,r=e.style,i={};return t||r?(t&&(i.className=t),r&&(i.style=r)):i.style={width:"100%",height:"100%"},React__default.createElement("div",i)}_defineProperty(ReferenceWrapper,"displayName","SizeMeReferenceWrapper"),ReferenceWrapper.propTypes={children:PropTypes.element.isRequired},Placeholder.displayName="SizeMePlaceholder",Placeholder.propTypes={className:PropTypes.string,style:PropTypes.object};var renderWrapper=function(h){function e(e){var t=e.explicitRef,r=e.className,i=e.style,n=e.size,o=e.disablePlaceholder,a=(e.onSize,_objectWithoutProperties(e,["explicitRef","className","style","size","disablePlaceholder","onSize"])),s=(null==n||null==n.width&&null==n.height&&null==n.position)&&!o,l={className:r,style:i};null!=n&&(l.size=n);var c=s?React__default.createElement(Placeholder,{className:r,style:i}):React__default.createElement(h,_extends({},l,a));return React__default.createElement(ReferenceWrapper,{ref:t},c)}return e.displayName="SizeMeRenderer(".concat(getDisplayName(h),")"),e.propTypes={explicitRef:PropTypes.func.isRequired,className:PropTypes.string,style:PropTypes.object,size:PropTypes.shape({width:PropTypes.number,height:PropTypes.number,position:PropTypes.object}),disablePlaceholder:PropTypes.bool,onSize:PropTypes.func},e};function withSize(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,h=void 0===t?defaultConfig.monitorWidth:t,r=e.monitorHeight,p=void 0===r?defaultConfig.monitorHeight:r,i=e.monitorPosition,u=void 0===i?defaultConfig.monitorPosition:i,n=e.refreshRate,o=void 0===n?defaultConfig.refreshRate:n,a=e.refreshMode,s=void 0===a?defaultConfig.refreshMode:a,l=e.noPlaceholder,c=void 0===l?defaultConfig.noPlaceholder:l,d=e.resizeDetectorStrategy,f=void 0===d?defaultConfig.resizeDetectorStrategy:d;invariant(h||p||u,'You have to monitor at least one of the width, height, or position when using "sizeMe"'),invariant(16<=o,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant("throttle"===s||"debounce"===s,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===s?throttleDebounce.throttle:throttleDebounce.debounce;return function(e){var r=renderWrapper(e),t=function(){function n(){var e,c;_classCallCheck(this,n);for(var t=arguments.length,r=new Array(t),i=0;i<t;i++)r[i]=arguments[i];return _defineProperty(_assertThisInitialized(c=_possibleConstructorReturn(this,(e=_getPrototypeOf(n)).call.apply(e,[this].concat(r)))),"domEl",null),_defineProperty(_assertThisInitialized(c),"state",{width:void 0,height:void 0,position:void 0}),_defineProperty(_assertThisInitialized(c),"uninstall",function(){if(c.domEl){try{c.detector.uninstall(c.domEl)}catch(e){console.warn(errMsg)}c.domEl=null}}),_defineProperty(_assertThisInitialized(c),"determineStrategy",function(e){e.onSize?(c.callbackState||(c.callbackState=_objectSpread2({},c.state)),c.strategy="callback"):c.strategy="render"}),_defineProperty(_assertThisInitialized(c),"strategisedSetState",function(e){"callback"===c.strategy&&(c.callbackState=e,c.props.onSize(e)),c.setState(e)}),_defineProperty(_assertThisInitialized(c),"strategisedGetState",function(){return"callback"===c.strategy?c.callbackState:c.state}),_defineProperty(_assertThisInitialized(c),"refCallback",function(e){c.element=e}),_defineProperty(_assertThisInitialized(c),"hasSizeChanged",function(e,t){var r=e.position||{},i=t.position||{};return h&&e.width!==t.width||p&&e.height!==t.height||u&&(r.top!==i.top||r.left!==i.left||r.bottom!==i.bottom||r.right!==i.right)}),_defineProperty(_assertThisInitialized(c),"checkIfSizeChanged",y(o,function(e){var t=e.getBoundingClientRect(),r=t.width,i=t.height,n=t.right,o=t.left,a=t.top,s=t.bottom,l={width:h?r:null,height:p?i:null,position:u?{right:n,left:o,top:a,bottom:s}:null};c.hasSizeChanged(c.strategisedGetState(),l)&&c.strategisedSetState(l)})),c}return _inherits(n,React__default.Component),_createClass(n,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(f),this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.uninstall()}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM.findDOMNode(this.element);e?this.domEl?(this.domEl.isSameNode&&!this.domEl.isSameNode(e)||this.domEl!==e)&&(this.uninstall(),this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):(this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):this.uninstall()}},{key:"render",value:function(){var e=withSize.enableSSRBehaviour||withSize.noPlaceholders||c||"callback"===this.strategy,t=_objectSpread2({},this.state);return React__default.createElement(r,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:t,disablePlaceholder:e},this.props))}}]),n}();return _defineProperty(t,"displayName","SizeMe(".concat(getDisplayName(e),")")),_defineProperty(t,"propTypes",{onSize:PropTypes.func}),t.WrappedComponent=e,t}}withSize.enableSSRBehaviour=!1,withSize.noPlaceholders=!1;var SizeMe=function(){function i(e){var t;_classCallCheck(this,i),_defineProperty(_assertThisInitialized(t=_possibleConstructorReturn(this,_getPrototypeOf(i).call(this,e))),"createComponent",function(e){t.SizeAware=withSize(e)(function(e){return e.children})}),_defineProperty(_assertThisInitialized(t),"onSize",function(e){return t.setState({size:e})});e.children,e.render;var r=_objectWithoutProperties(e,["children","render"]);return t.createComponent(r),t.state={size:{width:void 0,height:void 0}},t}return _inherits(i,React.Component),_createClass(i,[{key:"componentDidUpdate",value:function(e){var t=this.props,r=(t.children,t.render,_objectWithoutProperties(t,["children","render"])),i=(e.children,e.render,_objectWithoutProperties(e,["children","render"]));isShallowEqual(r,i)||this.createComponent(r)}},{key:"render",value:function(){var e=this.SizeAware,t=this.props.children||this.props.render;return React__default.createElement(e,{onSize:this.onSize},t({size:this.state.size}))}}]),i}();_defineProperty(SizeMe,"propTypes",{children:PropTypes.func,render:PropTypes.func}),_defineProperty(SizeMe,"defaultProps",{children:void 0,render:void 0}),withSize.SizeMe=SizeMe,withSize.withSize=withSize,module.exports=withSize;
//# sourceMappingURL=react-sizeme.min.js.map

88

package.json
{
"name": "react-sizeme",
"version": "2.6.10",
"version": "2.6.11",
"description": "Make your React Components aware of their width and/or height!",

@@ -28,14 +28,14 @@ "license": "MIT",

"lint": "eslint src",
"precommit": "lint-staged && npm run test",
"prepublish": "npm run build",
"prepublish": "yarn run build",
"test": "jest",
"test:coverage": "npm run test -- --coverage",
"test:coverage:deploy": "npm run test:coverage && codecov"
"test:coverage": "yarn run test -- --coverage",
"test:coverage:deploy": "yarn run test:coverage && codecov"
},
"resolutions": {
"@types/react": "16.9.5"
"@types/react": "16.9.17"
},
"dependencies": {
"element-resize-detector": "^1.1.15",
"element-resize-detector": "^1.1.16",
"invariant": "^2.2.4",
"prop-types": "^15.7.2",
"shallowequal": "^1.1.0",

@@ -45,3 +45,2 @@ "throttle-debounce": "^2.1.0"

"peerDependencies": {
"prop-types": "^15.0.0-0",
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0",

@@ -51,48 +50,45 @@ "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0"

"devDependencies": {
"@types/react": "^16.9.5",
"@types/react-dom": "^16.9.1",
"@babel/cli": "^7.8.3",
"@babel/core": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/polyfill": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.8.3",
"@babel/register": "^7.8.3",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"app-root-dir": "1.0.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "10.0.3",
"babel-jest": "^23.0.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-3": "6.24.1",
"babel-register": "^6.26.0",
"change-case": "^3.0.2",
"babel-jest": "^24.9.0",
"codecov": "^3.6.1",
"cross-env": "^6.0.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.4.2",
"eslint": "^6.5.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.4.0",
"eslint-plugin-import": "^2.18.2",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^2.1.2",
"gzip-size": "^4.0.0",
"husky": "^0.14.3",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^2.3.0",
"gzip-size": "^5.1.1",
"husky": "^4.0.7",
"in-publish": "2.0.0",
"jest": "^23.1.0",
"lint-staged": "^7.2.0",
"prettier": "^1.18.2",
"jest": "^24.9.0",
"lint-staged": "^9.5.0",
"prettier": "^1.19.1",
"pretty-bytes": "5.3.0",
"prop-types": "^15.5.10",
"ramda": "^0.26.1",
"react": "^16.10.2",
"react": "^16.12.0",
"react-addons-test-utils": "^15.6.0",
"react-dom": "^16.10.2",
"react-test-renderer": "^16.10.2",
"react-dom": "^16.12.0",
"react-test-renderer": "^16.12.0",
"readline-sync": "1.4.10",
"rimraf": "^3.0.0",
"rollup": "^0.60.7",
"rollup-plugin-babel": "^3.0.4",
"rollup-plugin-uglify": "^4.0.0",
"typescript": "^3.6.4",
"rollup": "^1.29.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-uglify": "^6.0.4",
"title-case": "^3.0.2",
"typescript": "^3.7.4",
"typings-tester": "^0.3.2"

@@ -108,3 +104,4 @@ },

"testPathIgnorePatterns": [
"<rootDir>/(coverage|dist|node_modules|tools)/"
"<rootDir>/(coverage|dist|node_modules|tools)/",
"<rootDir>/src/__tests__/typescript/"
],

@@ -163,3 +160,8 @@ "testURL": "http://localhost/"

]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && yarn run test"
}
}
}

13

README.md

@@ -65,2 +65,3 @@ <p>&nbsp;</p>

- [Extreme Appreciation](https://github.com/ctrlplusb/react-sizeme#extreme-appreciation)
- [Backers](https://github.com/ctrlplusb/react-sizeme#backers)

@@ -335,1 +336,13 @@ <p>&nbsp;</p>

We make use of the awesome [element-resize-detector](https://github.com/wnr/element-resize-detector) library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely [css-element-queries](https://github.com/marcj/css-element-queries) by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. :sparkle-heart:
<p>&nbsp;</p>
---
## Backers
Thank goes to all our backers! [[Become a backer](https://opencollective.com/react-sizeme#backer)].
<a href="https://opencollective.com/react-sizeme#backers">
<img src="https://opencollective.com/react-sizeme/backers.svg?width=950" />
</a>

13

rollup.config.js
const babel = require('rollup-plugin-babel')
const changeCase = require('change-case')
const { titleCase } = require('title-case')
const packageJson = require('./package.json')

@@ -22,5 +22,3 @@

sourcemap: true,
name: changeCase
.titleCase(packageJson.name.replace(/-/g, ' '))
.replace(/ /g, ''),
name: titleCase(packageJson.name.replace(/-/g, ' ')).replace(/ /g, ''),
},

@@ -31,6 +29,9 @@ plugins: [

exclude: 'node_modules/**',
presets: [['env', { modules: false }], 'stage-3', 'react'],
plugins: ['external-helpers', 'transform-class-properties'],
presets: [
['@babel/preset-env', { modules: false }],
'@babel/preset-react',
],
plugins: ['@babel/plugin-proposal-class-properties'],
}),
],
}
dist/react-sizeme.js.map

Sorry, the diff of this file is not supported yet

dist/react-sizeme.min.js.map

Sorry, the diff of this file is not supported yet