Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-scrollbar-size
Advanced tools
react-scrollbar-size - npm Package Compare versions
Comparing version 4.0.0 to 5.0.0
158
CHANGELOG.md
@@ -1,60 +0,103 @@ | ||
| ## HEAD | ||
| # Changelog | ||
| ## 4.0.0 | ||
| ###### _2021_05_15_ | ||
| **BREAKING CHANGE** | ||
| - Deprecated the legacy component syntax in favor of the custom hook syntax introduced in [#263](https://github.com/shawnmcknight/react-scrollbar-size/pull/263). The custom hook is now the default export from the library. See the [README](https://github.com/shawnmcknight/react-scrollbar-size/blob/main/README.md) for information on how to use the custom hook syntax. ([#309](https://github.com/shawnmcknight/react-scrollbar-size/pull/309) by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| All notable changes to this project will be documented in this file. | ||
| ## 4.0.0-rc.0 | ||
| ###### _2021_04_04_ | ||
| **BREAKING CHANGE** | ||
| - Deprecated the legacy component syntax in favor of the custom hook syntax introduced in [#263](https://github.com/shawnmcknight/react-scrollbar-size/pull/263). The custom hook is now the default export from the library. See the [README](https://github.com/shawnmcknight/react-scrollbar-size/blob/main/README.md) for information on how to use the custom hook syntax. ([#309](https://github.com/shawnmcknight/react-scrollbar-size/pull/309) by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), | ||
| and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). | ||
| ## 3.2.0 | ||
| ###### _2021_03_11_ | ||
| - Updated library to export a custom hook to provide the same functionality as the component syntax. This is much easier to use as a consumer. ([#263](https://github.com/shawnmcknight/react-scrollbar-size/pull/263) by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| ## [Unreleased] | ||
| ## [5.0.0] - 2022-05-07 | ||
| ### Breaking changes | ||
| - Browser targets have been changed to the default targets of [browserslist](https://github.com/browserslist/browserslist#full-list) (`> 0.5%, last 2 versions, Firefox ESR, not dead`) plus `not ie 11`. Browsers outside of that range may be supported, but are not guaranteed. ([#705](https://github.com/shawnmcknight/react-scrollbar-size/pull/705)) | ||
| ### Added | ||
| - Disable dependabot ([#655](https://github.com/shawnmcknight/react-scrollbar-size/pull/655)) and enable renovate ([#656](https://github.com/shawnmcknight/react-scrollbar-size/pull/656)) | ||
| - Add support for React 18 ([#693](https://github.com/shawnmcknight/react-scrollbar-size/pull/693)) | ||
| - Improved CHANGELOG format ([#704](https://github.com/shawnmcknight/react-scrollbar-size/pull/704)) | ||
| ### Fixed | ||
| - Fix use of `act` in test scripts ([#598](https://github.com/shawnmcknight/react-scrollbar-size/pull/598)) | ||
| - Bypass `babel` for example launches to eliminate warnings emitted by parcel ([#705](https://github.com/shawnmcknight/react-scrollbar-size/pull/705)) | ||
| - Fix launch configuration for vscode debugging ([#705](https://github.com/shawnmcknight/react-scrollbar-size/pull/705)) | ||
| ## [4.0.0] - 2021-05-15 | ||
| ### Breaking changes | ||
| - Deprecated the legacy component syntax in favor of the custom hook syntax introduced in [#263](https://github.com/shawnmcknight/react-scrollbar-size/pull/263). The custom hook is now the default export from the library. See the [README](https://github.com/shawnmcknight/react-scrollbar-size/blob/main/README.md) for information on how to use the custom hook syntax. ([#309](https://github.com/shawnmcknight/react-scrollbar-size/pull/309)) | ||
| ## [4.0.0-rc.0] - 2021-04-04 | ||
| ### Breaking changes | ||
| - Deprecated the legacy component syntax in favor of the custom hook syntax introduced in [#263](https://github.com/shawnmcknight/react-scrollbar-size/pull/263). The custom hook is now the default export from the library. See the [README](https://github.com/shawnmcknight/react-scrollbar-size/blob/main/README.md) for information on how to use the custom hook syntax. ([#309](https://github.com/shawnmcknight/react-scrollbar-size/pull/309)) | ||
| ## [3.2.0] - 2021-03-11 | ||
| ### Added | ||
| - Updated library to export a custom hook to provide the same functionality as the component syntax. This is much easier to use as a consumer. ([#263](https://github.com/shawnmcknight/react-scrollbar-size/pull/263)) | ||
| - The component syntax is now considered legacy and will be deprecated in a future major release. | ||
| ## 3.1.1 | ||
| ###### _2021_03_06_ | ||
| - Update links to reference new repository location and main branch ([#260](https://github.com/shawnmcknight/react-scrollbar-size/pull/260) by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| - Change from `master` branch to `main` branch (by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| ## [3.1.1] - 2021-03-06 | ||
| ## 3.1.0 | ||
| ###### _2020_11_07_ | ||
| - Update dependency ranges to support react `^17.0.1` ([#140](https://github.com/shawnmcknight/react-scrollbar-size/pull/140) by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| ### Added | ||
| ## 3.0.1 | ||
| ###### _2020-07-25_ | ||
| - Internalized `debounce` function ([#30](https://github.com/shawnmcknight/react-scrollbar-size/pull/30) by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| - Update links to reference new repository location and main branch ([#260](https://github.com/shawnmcknight/react-scrollbar-size/pull/260)) | ||
| - Change from `master` branch to `main` branch | ||
| ## [3.1.0] - 2020-11-07 | ||
| ### Added | ||
| - Update dependency ranges to support react `^17.0.1` ([#140](https://github.com/shawnmcknight/react-scrollbar-size/pull/140)) | ||
| ## [3.0.1] - 2020-07-25 | ||
| ### Added | ||
| - Internalized `debounce` function ([#30](https://github.com/shawnmcknight/react-scrollbar-size/pull/30)) | ||
| - Repo now has zero production dependencies! | ||
| ## 3.0.0 | ||
| ###### _2020-07-18_ | ||
| **BREAKING CHANGE** | ||
| - Library has been completely rewritten in TypeScript, complies with React >=16.8, and all tooling has been updated ([#11](https://github.com/shawnmcknight/react-scrollbar-size/pull/11) by [@shawnmcknight](https://github.com/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`. | ||
| ## [3.0.0] - 2020-07-18 | ||
| ## 3.0.0-rc.0 | ||
| ###### _2020-07-18_ | ||
| **BREAKING CHANGE** | ||
| - Library has been completely rewritten in TypeScript, complies with React >=16.8, and all tooling has been updated ([#11](https://github.com/shawnmcknight/react-scrollbar-size/pull/11) by [@shawnmcknight](https://github.com/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`. | ||
| ### Breaking changes | ||
| ## 2.1.0 | ||
| ###### _2018-01-31_ | ||
| - Lodash as a peerDependency was causing missing peerDependency errors. Lodash peerDep replaced with stifle dep (#7 by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| - Library has been completely rewritten in TypeScript, complies with React >=16.8, and all tooling has been updated ([#11](https://github.com/shawnmcknight/react-scrollbar-size/pull/11)) | ||
| - 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`. | ||
| ## [3.0.0-rc.0] - 2020-07-18 | ||
| ### Breaking changes | ||
| - Library has been completely rewritten in TypeScript, complies with React >=16.8, and all tooling has been updated ([#11](https://github.com/shawnmcknight/react-scrollbar-size/pull/11)) | ||
| - 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] - 2018-01-31 | ||
| ### Fixed | ||
| - Lodash as a peerDependency was causing missing peerDependency errors. Lodash peerDep replaced with stifle dep (#7) | ||
| ### Added | ||
| - Bump several dependency versions | ||
| - Configure npm to not generate package-lock file | ||
| ## 2.0.0 | ||
| ## [2.0.0] - 2017-05-30 | ||
| ###### _2017-05-30_ | ||
| Major version bump to facilitate new dependency requirements: | ||
| - Make react a peerDependency to avoid running module duplication (#3 by [@shawnmcknight](https://github.com/shawnmcknight)) | ||
| ### Breaking changes | ||
| - Make react a peerDependency to avoid running module duplication (#3) | ||
| - Make lodash a peerDependency due to its common use and avoid inflating build size unnecessarily | ||
| ## 1.0.2 | ||
| ## [1.0.2] - 2017-05-28 | ||
| ###### _2017-05-28_ | ||
| ### Added | ||
| - Remove separate lodash modules in favor of direct import of functions | ||
@@ -67,10 +110,12 @@ - Add support for prettier and update libraries to conform to rules | ||
| ## 1.0.1 | ||
| ## [1.0.1] - 2017-04-26 | ||
| ###### _2017-04-26_ | ||
| ### Fixed | ||
| - Cancel throttled events when unmounting component | ||
| ## 1.0.0 | ||
| ## [1.0.0] - 2017-04-17 | ||
| ###### _2017-04-17_ | ||
| ### Added | ||
| - Add unit tests through mocha/chai/enzyme to reach 100% code coverage | ||
@@ -82,5 +127,22 @@ - Add code coverage tooling through istanbul/nyc | ||
| ## 0.1.0 | ||
| ## 0.1.0 - 2017-03-25 | ||
| ###### _2017-03-25_ | ||
| - Initial creation of this repository! Thanks for using it! | ||
| ### Added | ||
| - Initial creation of this repository! Thanks for using it! | ||
| [unreleased]: https://github.com/shawnmcknight/react-scrollbar-size/compare/5.0.0...HEAD | ||
| [5.0.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/4.0.0...5.0.0 | ||
| [4.0.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/4.0.0-rc.0...4.0.0 | ||
| [4.0.0-rc.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/3.2.0...4.0.0-rc.0 | ||
| [3.2.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/3.1.1...3.2.0 | ||
| [3.1.1]: https://github.com/shawnmcknight/react-scrollbar-size/compare/3.1.0...3.1.1 | ||
| [3.1.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/3.0.1...3.1.0 | ||
| [3.0.1]: https://github.com/shawnmcknight/react-scrollbar-size/compare/3.0.0...3.0.1 | ||
| [3.0.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/3.0.0-rc.0...3.0.0 | ||
| [3.0.0-rc.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/2.1.0...3.0.0-rc.0 | ||
| [2.1.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/2.0.0...2.1.0 | ||
| [2.0.0]: https://github.com/shawnmcknight/react-scrollbar-size/compare/1.0.2...2.0.0 | ||
| [1.0.2]: https://github.com/shawnmcknight/react-scrollbar-size/compare/1.0.1...1.0.2 | ||
| [1.0.1]: https://github.com/shawnmcknight/react-scrollbar-size/compare/1.0.0...1.0.1 | ||
| [1.0.0]: https://github.com/shawnmcknight/react-scrollbar-size/releases/tag/1.0.0 |
@@ -12,3 +12,4 @@ "use strict"; | ||
| /* eslint-disable import/no-default-export */ | ||
| var _default = _useScrollbarSize.default; | ||
| exports.default = _default; |
| { | ||
| "name": "react-scrollbar-size", | ||
| "version": "4.0.0", | ||
| "description": "React hook to calculate the size of browser scrollbars", | ||
| "main": "index.js", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/shawnmcknight/react-scrollbar-size.git" | ||
| }, | ||
| "keywords": [ | ||
| "react", | ||
| "scrollbar" | ||
| ], | ||
| "author": "Shawn McKnight", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/shawnmcknight/react-scrollbar-size/issues" | ||
| }, | ||
| "homepage": "https://github.com/shawnmcknight/react-scrollbar-size#readme", | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.1" | ||
| }, | ||
| "dependencies": {} | ||
| "name": "react-scrollbar-size", | ||
| "private": false, | ||
| "version": "5.0.0", | ||
| "description": "React hook to calculate the size of browser scrollbars", | ||
| "main": "index.js", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/shawnmcknight/react-scrollbar-size.git" | ||
| }, | ||
| "keywords": [ | ||
| "react", | ||
| "scrollbar" | ||
| ], | ||
| "author": "Shawn McKnight", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/shawnmcknight/react-scrollbar-size/issues" | ||
| }, | ||
| "homepage": "https://github.com/shawnmcknight/react-scrollbar-size#readme", | ||
| "engines": { | ||
| "node": ">=14.0.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.1 || ^18.0.0" | ||
| } | ||
| } |
| # React-Scrollbar-Size | ||
| <div align="center"> | ||
@@ -13,6 +14,3 @@ | ||
| [](https://prettier.io/) | ||
| [](https://dependabot.com) | ||
| [](https://david-dm.org/shawnmcknight/react-scrollbar-size/main) | ||
| [](https://david-dm.org/shawnmcknight/react-scrollbar-size/main?type=peer) | ||
| [](https://david-dm.org/shawnmcknight/react-scrollbar-size/main?type=dev) | ||
| [](https://libraries.io/npm/react-scrollbar-size) | ||
| [](https://isitmaintained.com/project/shawnmcknight/react-scrollbar-size) | ||
@@ -26,2 +24,3 @@  | ||
| ## Installation | ||
| React-Scrollbar-Size is available as an [npm package](https://www.npmjs.com/package/react-scrollbar-size): | ||
@@ -34,2 +33,3 @@ | ||
| ## Usage | ||
| The `useScrollbarSize` custom hook returns an object with two properties: | ||
@@ -43,7 +43,9 @@ | ||
| ## Examples | ||
| To see a live example, follow these [instructions](/example/README.md). | ||
| ### TypeScript | ||
| ```tsx | ||
| import React, { CSSProperties, FunctionComponent } from 'react'; | ||
| import { CSSProperties, FunctionComponent } from 'react'; | ||
| import useScrollbarSize from 'react-scrollbar-size'; | ||
@@ -74,4 +76,4 @@ | ||
| ### JavaScript | ||
| ```jsx | ||
| import React from 'react'; | ||
| import useScrollbarSize from 'react-scrollbar-size'; | ||
@@ -102,3 +104,4 @@ | ||
| ## License | ||
| This project is licensed under the terms of the | ||
| [MIT license](/LICENSE). |
@@ -12,27 +12,11 @@ "use strict"; | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
| function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
| function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| var useScrollbarSize = function useScrollbarSize() { | ||
| var _useState = (0, _react.useState)({ | ||
| const useScrollbarSize = () => { | ||
| const [dimensions, setDimensions] = (0, _react.useState)({ | ||
| height: 0, | ||
| width: 0 | ||
| }), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| dimensions = _useState2[0], | ||
| setDimensions = _useState2[1]; | ||
| }); | ||
| const element = (0, _react.useRef)(null); // initialize resize event handler and state when mounted | ||
| var element = (0, _react.useRef)(null); // initialize resize event handler and state when mounted | ||
| (0, _react.useEffect)(function () { | ||
| var getElement = function getElement() { | ||
| (0, _react.useEffect)(() => { | ||
| const getElement = () => { | ||
| if (element.current == null) { | ||
@@ -53,14 +37,16 @@ // element was not created yet -- initialize | ||
| var updateState = function updateState() { | ||
| var _getElement = getElement(), | ||
| offsetHeight = _getElement.offsetHeight, | ||
| clientHeight = _getElement.clientHeight, | ||
| offsetWidth = _getElement.offsetWidth, | ||
| clientWidth = _getElement.clientWidth; | ||
| var scrollbarHeight = offsetHeight - clientHeight; | ||
| var scrollbarWidth = offsetWidth - clientWidth; | ||
| setDimensions(function (currentDimensions) { | ||
| var height = currentDimensions.height, | ||
| width = currentDimensions.width; | ||
| const updateState = () => { | ||
| const { | ||
| offsetHeight, | ||
| clientHeight, | ||
| offsetWidth, | ||
| clientWidth | ||
| } = getElement(); | ||
| const scrollbarHeight = offsetHeight - clientHeight; | ||
| const scrollbarWidth = offsetWidth - clientWidth; | ||
| setDimensions(currentDimensions => { | ||
| const { | ||
| height, | ||
| width | ||
| } = currentDimensions; | ||
| return height !== scrollbarHeight || width !== scrollbarWidth ? { | ||
@@ -73,3 +59,3 @@ height: scrollbarHeight, | ||
| var handleResize = (0, _utils.debounce)(updateState, 100); // initialize | ||
| const handleResize = (0, _utils.debounce)(updateState, 100); // initialize | ||
@@ -79,5 +65,5 @@ window.addEventListener('resize', handleResize); | ||
| updateState(); | ||
| var elementToRemove = getElement(); // cleanup | ||
| const elementToRemove = getElement(); // cleanup | ||
| return function () { | ||
| return () => { | ||
| handleResize.cancel(); | ||
@@ -84,0 +70,0 @@ window.removeEventListener('resize', handleResize); |
@@ -10,6 +10,6 @@ "use strict"; | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| var debounce = function debounce(fn, waitFor) { | ||
| var timeout; | ||
| const debounce = (fn, waitFor) => { | ||
| let timeout; | ||
| var clear = function clear() { | ||
| const clear = () => { | ||
| if (timeout != null) { | ||
@@ -21,3 +21,3 @@ clearTimeout(timeout); | ||
| var debouncedFn = function debouncedFn() { | ||
| const debouncedFn = function () { | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
@@ -28,8 +28,8 @@ args[_key] = arguments[_key]; | ||
| clear(); | ||
| timeout = setTimeout(function () { | ||
| fn.apply(void 0, args); | ||
| timeout = setTimeout(() => { | ||
| fn(...args); | ||
| }, waitFor); | ||
| }; | ||
| debouncedFn.cancel = function () { | ||
| debouncedFn.cancel = () => { | ||
| clear(); | ||
@@ -36,0 +36,0 @@ }; |
@@ -8,3 +8,3 @@ "use strict"; | ||
| enumerable: true, | ||
| get: function get() { | ||
| get: function () { | ||
| return _debounce.default; | ||
@@ -11,0 +11,0 @@ } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by3.03%
102
Worsened metrics
- Total package byte prevSize
- decreased by-0.59%
16936
- Lines of code
- decreased by-5.11%
130
No dependency changes