react-scrollbar-size - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0-rc.0

CHANGELOG.md

 ## HEAD
 
+## 3.0.0-rc
+###### _2020-07-18_
+**BREAKING CHANGE**
+- Library has been completely rewritten in TypeScript, complies with React >=16.8, and all tooling has been updated (#11) @shawnmcknight
+  - The API has been changed significantly; there are no longer separate `onLoad` and `onChange` props in favor of a single `onChange` prop.  The callback for `onChange` returns `height` and `width` instead of `scrollbarHeight` and `scrollbarWidth`.
+
 ## 2.1.0
-###### _Jan 31, 2018_
+###### _2020-01-31_
 - Lodash as a peerDependency was causing missing peerDependency errors.  Lodash peerDep replaced with stifle dep (#7) @shawnmcknight
@@ -11,3 +17,3 @@ - Bump several dependency versions @shawnmcknight
 
-###### _May 30, 2017_
+###### _2017-05-30_
 Major version bump to facilitate new dependency requirements:
@@ -19,3 +25,3 @@ - Make react a peerDependency to avoid running module duplication (#3) @shawnmcknight
 
-###### _May 28, 2017_
+###### _2017-05-28_
 - Remove separate lodash modules in favor of direct import of functions @shawnmcknight
@@ -30,3 +36,3 @@ - Add support for prettier and update libraries to conform to rules @shawnmcknight
 
-###### _Apr 26, 2017_
+###### _2017-04-26_
 - Cancel throttled events when unmounting component @shawnmcknight
@@ -36,4 +42,3 @@
 
-###### _Apr 17, 2017_
-
+###### _2017-04-17_
 - Add unit tests through mocha/chai/enzyme to reach 100% code coverage @shawnmcknight
@@ -47,4 +52,3 @@ - Add code coverage tooling through istanbul/nyc @shawnmcknight
 
-###### _Mar 25, 2017_
-
+###### _2017-03-25_
 - Initial creation of this repository!  Thanks for using it!

index.js

@@ -1,13 +0,29 @@
-'use strict';
+"use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ScrollbarSizeChangeHandlerParams", {
+  enumerable: true,
+  get: function get() {
+    return _ScrollbarSize.ScrollbarSizeChangeHandlerParams;
+  }
+});
+Object.defineProperty(exports, "ScrollbarSizeProps", {
+  enumerable: true,
+  get: function get() {
+    return _ScrollbarSize.ScrollbarSizeProps;
+  }
+});
+exports.default = void 0;
 
-var _ScrollbarSize = require('./ScrollbarSize');
+var _ScrollbarSize = _interopRequireWildcard(require("./ScrollbarSize"));
 
-var _ScrollbarSize2 = _interopRequireDefault(_ScrollbarSize);
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-exports.default = _ScrollbarSize2.default;
+var _default = _ScrollbarSize.default;
+exports.default = _default;

package.json

 {
-  "name": "react-scrollbar-size",
-  "author": "STORIS",
-  "version": "2.1.0",
-  "description": "React component to calculate the size of browser scrollbars",
-  "main": "./index.js",
-  "keywords": [
-    "react",
-    "scrollbar"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/STORIS/react-scrollbar-size.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/STORIS/react-scrollbar-size/issues"
-  },
-  "homepage": "https://github.com/STORIS/react-scrollbar-size#readme",
-  "peerDependencies": {
-    "react": "^15.3.0 || ^16.0.0"
-  },
-  "dependencies": {
-    "babel-runtime": "^6.26.0",
-    "prop-types": "^15.6.0",
-    "react-event-listener": "^0.5.1",
-    "stifle": "^1.0.2"
-  }
+	"name": "react-scrollbar-size",
+	"version": "3.0.0-rc.0",
+	"description": "React component to calculate the size of browser scrollbars",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/STORIS/react-scrollbar-size.git"
+	},
+	"keywords": [
+		"react",
+		"scrollbar"
+	],
+	"author": "STORIS",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/STORIS/react-scrollbar-size/issues"
+	},
+	"homepage": "https://github.com/STORIS/react-scrollbar-size#readme",
+	"peerDependencies": {
+		"react": "^16.8.0"
+	},
+	"dependencies": {
+		"lodash.debounce": "^4.0.8"
+	}
 }

README.md

 # React-Scrollbar-Size
+[![STORIS](https://circleci.com/gh/STORIS/react-scrollbar-size.svg?style=svg)](https://app.circleci.com/pipelines/github/STORIS/react-scrollbar-size?branch=master)
+[![Downloads](https://img.shields.io/npm/dm/react-scrollbar-size)](https://www.npmjs.com/package/react-scrollbar-size)
 
@@ -18,42 +20,94 @@ React-Scrollbar-Size is a React component designed to calculate the size of the user agent's horizontal and vertical scrollbars.
 | ---- | ---- |
-| `onLoad` | Callback which will fire when the component mounts. |
 | `onChange` | Callback which will fire when the scrollbar sizes change. |
 
-Each of the callbacks accepts an object which will be updated with the following properties:
+The callback accepts an object which will be updated with the following properties:
 
 | Name | Description |
 | ---- | ---- |
-| `scrollbarWidth` | The current width of the vertical scrollbar. |
-| `scrollbarHeight` | The current height of the horizontal scrollbar. |
+| `width` | The current width of the vertical scrollbar. |
+| `height` | The current height of the horizontal scrollbar. |
 
-### Example
-```js
-import React, { Component } from 'react';
+## Examples
+To see a live example, follow these [instructions](https://github.com/STORIS/react-scrollbar-size/blob/master/example/README.md).
+
+### TypeScript
+```tsx
+import React, { CSSProperties, FunctionComponent, useState } from 'react';
 import ScrollbarSize from 'react-scrollbar-size';
 
-class MyComponent extends Component {
-  scrollbarSizeLoad = (measurements) => {
-    console.log('Scrollbars loaded', measurements);
-  }
+const styles: CSSProperties = {
+  margin: '1rem',
+  textAlign: 'center',
+};
 
-  scrollbarSizeChange = (measurements) => {
-    console.log('Scrollbars changed', measurements);
-  }
+const ScrollbarSizeDemo: FunctionComponent = () => {
+  const [currentHeight, setHeight] = useState(0);
+  const [currentWidth, setWidth] = useState(0);
 
-  render() {
-    return (
-      <div>
-        <ScrollbarSize
-          onLoad={this.scrollbarSizeLoad}
-          onChange={this.scrollbarSizeChange}
-        />
-      </div>
-    );
-  }
-}
+  const scrollbarSizeChange = ({ height, width }: ScrollbarSizeChangeHandlerParams) => {
+    if (height !== currentHeight) {
+      setHeight(height);
+    }
+
+    if (width !== currentWidth) {
+      setWidth(width);
+    }
+  };
+
+  return (
+    <div style={styles}>
+      <h2>React Scrollbar Size Demo</h2>
+      <h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
+      <ScrollbarSize onChange={scrollbarSizeChange} />
+      <p>
+        {`The current height of the scrollbar is ${currentHeight}px.`}
+        <br />
+        {`The current width of the scrollbar is ${currentWidth}px.`}
+      </p>
+    </div>
+  );
+};
 ```
-To see a live example, follow these [instructions](https://github.com/STORIS/react-scrollbar-size/blob/master/examples/README.md).
 
+### JavaScript
+```jsx
+import React, { useState } from 'react';
+import ScrollbarSize from 'react-scrollbar-size';
+
+const styles = {
+  margin: '1rem',
+  textAlign: 'center',
+};
+
+const ScrollbarSizeDemo = () => {
+  const [currentHeight, setHeight] = useState(0);
+  const [currentWidth, setWidth] = useState(0);
+
+  const scrollbarSizeChange = ({ height, width }) => {
+    if (height !== currentHeight) {
+      setHeight(height);
+    }
+
+    if (width !== currentWidth) {
+      setWidth(width);
+    }
+  };
+
+  return (
+    <div style={styles}>
+      <h2>React Scrollbar Size Demo</h2>
+      <h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
+      <ScrollbarSize onChange={scrollbarSizeChange} />
+      <p>
+        {`The current height of the scrollbar is ${currentHeight}px.`}
+        <br />
+        {`The current width of the scrollbar is ${currentWidth}px.`}
+      </p>
+    </div>
+  );
+};
+```
+
 ## License
 This project is licensed under the terms of the
 [MIT license](https://github.com/STORIS/react-scrollbar-size/blob/master/LICENSE).

ScrollbarSize.js

@@ -1,130 +0,93 @@
-'use strict';
+"use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
-	value: true
+  value: true
 });
+exports.default = void 0;
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _react = _interopRequireWildcard(require("react"));
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _reactEventListener = require('react-event-listener');
-
-var _reactEventListener2 = _interopRequireDefault(_reactEventListener);
-
-var _stifle = require('stifle');
-
-var _stifle2 = _interopRequireDefault(_stifle);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/** Styles for the div that will be generated for measuring scrollbar size */
 var styles = {
-	width: '100px',
-	height: '100px',
-	position: 'absolute',
-	top: '-100000px',
-	overflow: 'scroll',
-	msOverflowStyle: 'scrollbar'
+  width: '99px',
+  height: '99px',
+  position: 'absolute',
+  top: '-9999px',
+  overflow: 'scroll',
+  msOverflowStyle: 'scrollbar'
 };
+/** Params passed to change handler */
 
-var ScrollbarSize = function (_Component) {
-	(0, _inherits3.default)(ScrollbarSize, _Component);
+/** React component to fire an event when the size of the scrollbar changes */
+var ScrollbarSize = function ScrollbarSize(_ref) {
+  var onChange = _ref.onChange;
+  var height = (0, _react.useRef)(0);
+  var width = (0, _react.useRef)(0);
+  var nodeRef = (0, _react.useRef)(null);
+  /** Calculate and set the measurements of the scrollbar */
 
-	function ScrollbarSize() {
-		var _ref;
+  var setMeasurements = function setMeasurements() {
+    var _nodeRef$current;
 
-		var _temp, _this, _ret;
+    /* istanbul ignore next: nodeRef should be non-null */
+    var _ref2 = (_nodeRef$current = nodeRef.current) !== null && _nodeRef$current !== void 0 ? _nodeRef$current : {},
+        _ref2$offsetHeight = _ref2.offsetHeight,
+        offsetHeight = _ref2$offsetHeight === void 0 ? 0 : _ref2$offsetHeight,
+        _ref2$clientHeight = _ref2.clientHeight,
+        clientHeight = _ref2$clientHeight === void 0 ? 0 : _ref2$clientHeight,
+        _ref2$offsetWidth = _ref2.offsetWidth,
+        offsetWidth = _ref2$offsetWidth === void 0 ? 0 : _ref2$offsetWidth,
+        _ref2$clientWidth = _ref2.clientWidth,
+        clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
 
-		(0, _classCallCheck3.default)(this, ScrollbarSize);
+    height.current = offsetHeight - clientHeight;
+    width.current = offsetWidth - clientWidth;
+  }; // set up the resize handler
 
-		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-			args[_key] = arguments[_key];
-		}
 
-		return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ScrollbarSize.__proto__ || (0, _getPrototypeOf2.default)(ScrollbarSize)).call.apply(_ref, [this].concat(args))), _this), _this.setMeasurements = function () {
-			_this.scrollbarHeight = _this.node.offsetHeight - _this.node.clientHeight;
-			_this.scrollbarWidth = _this.node.offsetWidth - _this.node.clientWidth;
-		}, _this.handleResize = (0, _stifle2.default)(function () {
-			var onChange = _this.props.onChange;
+  (0, _react.useEffect)(function () {
+    var handleResize = (0, _lodash.default)(function () {
+      var prevHeight = height.current;
+      var prevWidth = width.current;
+      setMeasurements();
 
+      if (prevHeight !== height.current || prevWidth !== width.current) {
+        onChange({
+          height: height.current,
+          width: width.current
+        });
+      }
+    }, 100);
+    window.addEventListener('resize', handleResize); // cleanup
 
-			var prevHeight = _this.scrollbarHeight;
-			var prevWidth = _this.scrollbarWidth;
-			_this.setMeasurements();
-			if (prevHeight !== _this.scrollbarHeight || prevWidth !== _this.scrollbarWidth) {
-				onChange({ scrollbarHeight: _this.scrollbarHeight, scrollbarWidth: _this.scrollbarWidth });
-			}
-		}, 166), _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
-	}
+    return function () {
+      handleResize.cancel();
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [onChange]); // Fire the onChange handler on first render
 
-	(0, _createClass3.default)(ScrollbarSize, [{
-		key: 'componentDidMount',
-		value: function componentDidMount() {
-			var onLoad = this.props.onLoad;
+  (0, _react.useEffect)(function () {
+    setMeasurements();
+    onChange({
+      height: height.current,
+      width: width.current
+    });
+  }, [onChange]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    ref: nodeRef
+  });
+};
 
-
-			if (onLoad) {
-				this.setMeasurements();
-				onLoad({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth });
-			}
-		}
-	}, {
-		key: 'componentWillUnmount',
-		value: function componentWillUnmount() {
-			this.handleResize.cancel();
-		}
-	}, {
-		key: 'render',
-		// Corresponds to 10 frames at 60 Hz.
-
-		value: function render() {
-			var _this2 = this;
-
-			var onChange = this.props.onChange;
-
-
-			return _react2.default.createElement(
-				'div',
-				null,
-				onChange ? _react2.default.createElement(_reactEventListener2.default, { target: 'window', onResize: this.handleResize }) : null,
-				_react2.default.createElement('div', {
-					style: styles,
-					ref: function ref(node) {
-						_this2.node = node;
-					}
-				})
-			);
-		}
-	}]);
-	return ScrollbarSize;
-}(_react.Component);
-
-ScrollbarSize.defaultProps = {
-	onLoad: null,
-	onChange: null
-};
-exports.default = ScrollbarSize;
+var _default = ScrollbarSize;
+exports.default = _default;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14027

increased by50.89%

Dependency count

2

decreased by-60%

Number of package files

8

increased by33.33%

Lines of code

121

increased by22.22%

Number of lines in readme file

113

increased by91.53%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.debounce@^4.0.8

• + Addedlodash.debounce@4.0.8(transitive)

• - Removedbabel-runtime@^6.26.0

• - Removedprop-types@^15.6.0

• - Removedreact-event-listener@^0.5.1

• - Removedstifle@^1.0.2

• - Removed@babel/runtime@7.0.0-beta.42(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@1.2.72.6.12(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact-event-listener@0.5.10(transitive)

• - Removedregenerator-runtime@0.11.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedstifle@1.1.1(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwarning@3.0.0(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)