react-remove-scroll-bar - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

dist/es2015/component.d.ts

@@ -8,2 +8,5 @@ import * as React from 'react';
 }
+/**
+ * Removes page scrollbar and blocks page scroll when mounted
+ */
 export declare const RemoveScrollBar: React.FC<BodyScroll>;

dist/es2015/component.js

 import * as React from 'react';
 import { styleSingleton } from 'react-style-singleton';
+import { fullWidthClassName, zeroRightClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
 import { getGapWidth } from './utils';
-import { fullWidthClassName, zeroRightClassName, noScrollbarsClassName, removedBarSizeVariable } from "./constants";
 var Style = styleSingleton();
+// important tip - once we measure scrollBar width and remove them
+// we could not repeat this operation
+// thus we are using style-singleton - only the first "yet correct" style will be applied.
 var getStyles = function (_a, allowRelative, gapMode, important) {
     var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
     if (gapMode === void 0) { gapMode = 'margin'; }
-    return "\n  ." + noScrollbarsClassName + " {\n   overflow: hidden " + important + ";\n   padding-right: " + gap + "px " + important + ";\n  }\n  body {\n    overflow: hidden " + important + ";\n    " + [
-        allowRelative && "position: relative " + important + ";",
-        gapMode === 'margin' && "\n    padding-left: " + left + "px;\n    padding-top: " + top + "px;\n    padding-right: " + right + "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: " + gap + "px " + important + ";\n    ",
-        gapMode === 'padding' && "padding-right: " + gap + "px " + important + ";",
-    ].filter(Boolean).join('') + "\n  }\n  \n  ." + zeroRightClassName + " {\n    right: " + gap + "px " + important + ";\n  }\n  \n  ." + fullWidthClassName + " {\n    margin-right: " + gap + "px " + important + ";\n  }\n  \n  ." + zeroRightClassName + " ." + zeroRightClassName + " {\n    right: 0 " + important + ";\n  }\n  \n  ." + fullWidthClassName + " ." + fullWidthClassName + " {\n    margin-right: 0 " + important + ";\n  }\n  \n  body {\n    " + removedBarSizeVariable + ": " + gap + "px;\n  }\n";
+    return "\n  .".concat(noScrollbarsClassName, " {\n   overflow: hidden ").concat(important, ";\n   padding-right: ").concat(gap, "px ").concat(important, ";\n  }\n  body {\n    overflow: hidden ").concat(important, ";\n    ").concat([
+        allowRelative && "position: relative ".concat(important, ";"),
+        gapMode === 'margin' &&
+            "\n    padding-left: ".concat(left, "px;\n    padding-top: ").concat(top, "px;\n    padding-right: ").concat(right, "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: ").concat(gap, "px ").concat(important, ";\n    "),
+        gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
+    ]
+        .filter(Boolean)
+        .join(''), "\n  }\n  \n  .").concat(zeroRightClassName, " {\n    right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(fullWidthClassName, " {\n    margin-right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n    right: 0 ").concat(important, ";\n  }\n  \n  .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n    margin-right: 0 ").concat(important, ";\n  }\n  \n  body {\n    ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n  }\n");
 };
+/**
+ * Removes page scrollbar and blocks page scroll when mounted
+ */
 export var RemoveScrollBar = function (props) {
@@ -21,3 +30,3 @@ var _a = React.useState(getGapWidth(props.gapMode)), gap = _a[0], setGap = _a[1];
     var noRelative = props.noRelative, noImportant = props.noImportant, _b = props.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
-    return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') });
+    return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };

dist/es2015/constants.d.ts

 export declare const zeroRightClassName = "right-scroll-bar-position";
 export declare const fullWidthClassName = "width-before-scroll-bar";
 export declare const noScrollbarsClassName = "with-scroll-bars-hidden";
+/**
+ * Name of a CSS variable containing the amount of "hidden" scrollbar
+ * ! might be undefined ! use will fallback!
+ */
 export declare const removedBarSizeVariable = "--removed-body-scroll-bar-size";

dist/es2015/constants.js

 export var zeroRightClassName = 'right-scroll-bar-position';
 export var fullWidthClassName = 'width-before-scroll-bar';
 export var noScrollbarsClassName = 'with-scroll-bars-hidden';
+/**
+ * Name of a CSS variable containing the amount of "hidden" scrollbar
+ * ! might be undefined ! use will fallback!
+ */
 export var removedBarSizeVariable = '--removed-body-scroll-bar-size';

dist/es2015/index.d.ts

 import { RemoveScrollBar } from './component';
+import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
 import { getGapWidth } from './utils';
-import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
-export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth };
+export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };

dist/es2015/index.js

 import { RemoveScrollBar } from './component';
+import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
 import { getGapWidth } from './utils';
-import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
-export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth };
+export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };

dist/es2015/utils.js

@@ -13,7 +13,3 @@ export var zeroGap = {
     var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
-    return [
-        parse(left),
-        parse(top),
-        parse(right),
-    ];
+    return [parse(left), parse(top), parse(right)];
 };
@@ -20,0 +16,0 @@ export var getGapWidth = function (gapMode) {

dist/es5/component.d.ts

@@ -8,2 +8,5 @@ import * as React from 'react';
 }
+/**
+ * Removes page scrollbar and blocks page scroll when mounted
+ */
 export declare const RemoveScrollBar: React.FC<BodyScroll>;

dist/es5/component.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
+exports.RemoveScrollBar = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
 var react_style_singleton_1 = require("react-style-singleton");
+var constants_1 = require("./constants");
 var utils_1 = require("./utils");
-var constants_1 = require("./constants");
-var Style = react_style_singleton_1.styleSingleton();
+var Style = (0, react_style_singleton_1.styleSingleton)();
+// important tip - once we measure scrollBar width and remove them
+// we could not repeat this operation
+// thus we are using style-singleton - only the first "yet correct" style will be applied.
 var getStyles = function (_a, allowRelative, gapMode, important) {
     var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
     if (gapMode === void 0) { gapMode = 'margin'; }
-    return "\n  ." + constants_1.noScrollbarsClassName + " {\n   overflow: hidden " + important + ";\n   padding-right: " + gap + "px " + important + ";\n  }\n  body {\n    overflow: hidden " + important + ";\n    " + [
-        allowRelative && "position: relative " + important + ";",
-        gapMode === 'margin' && "\n    padding-left: " + left + "px;\n    padding-top: " + top + "px;\n    padding-right: " + right + "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: " + gap + "px " + important + ";\n    ",
-        gapMode === 'padding' && "padding-right: " + gap + "px " + important + ";",
-    ].filter(Boolean).join('') + "\n  }\n  \n  ." + constants_1.zeroRightClassName + " {\n    right: " + gap + "px " + important + ";\n  }\n  \n  ." + constants_1.fullWidthClassName + " {\n    margin-right: " + gap + "px " + important + ";\n  }\n  \n  ." + constants_1.zeroRightClassName + " ." + constants_1.zeroRightClassName + " {\n    right: 0 " + important + ";\n  }\n  \n  ." + constants_1.fullWidthClassName + " ." + constants_1.fullWidthClassName + " {\n    margin-right: 0 " + important + ";\n  }\n  \n  body {\n    " + constants_1.removedBarSizeVariable + ": " + gap + "px;\n  }\n";
+    return "\n  .".concat(constants_1.noScrollbarsClassName, " {\n   overflow: hidden ").concat(important, ";\n   padding-right: ").concat(gap, "px ").concat(important, ";\n  }\n  body {\n    overflow: hidden ").concat(important, ";\n    ").concat([
+        allowRelative && "position: relative ".concat(important, ";"),
+        gapMode === 'margin' &&
+            "\n    padding-left: ".concat(left, "px;\n    padding-top: ").concat(top, "px;\n    padding-right: ").concat(right, "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: ").concat(gap, "px ").concat(important, ";\n    "),
+        gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"),
+    ]
+        .filter(Boolean)
+        .join(''), "\n  }\n  \n  .").concat(constants_1.zeroRightClassName, " {\n    right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(constants_1.fullWidthClassName, " {\n    margin-right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(constants_1.zeroRightClassName, " .").concat(constants_1.zeroRightClassName, " {\n    right: 0 ").concat(important, ";\n  }\n  \n  .").concat(constants_1.fullWidthClassName, " .").concat(constants_1.fullWidthClassName, " {\n    margin-right: 0 ").concat(important, ";\n  }\n  \n  body {\n    ").concat(constants_1.removedBarSizeVariable, ": ").concat(gap, "px;\n  }\n");
 };
-exports.RemoveScrollBar = function (props) {
-    var _a = React.useState(utils_1.getGapWidth(props.gapMode)), gap = _a[0], setGap = _a[1];
+/**
+ * Removes page scrollbar and blocks page scroll when mounted
+ */
+var RemoveScrollBar = function (props) {
+    var _a = React.useState((0, utils_1.getGapWidth)(props.gapMode)), gap = _a[0], setGap = _a[1];
     React.useEffect(function () {
-        setGap(utils_1.getGapWidth(props.gapMode));
+        setGap((0, utils_1.getGapWidth)(props.gapMode));
     }, [props.gapMode]);
     var noRelative = props.noRelative, noImportant = props.noImportant, _b = props.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
-    return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : '') });
+    return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };
+exports.RemoveScrollBar = RemoveScrollBar;

dist/es5/constants.d.ts

 export declare const zeroRightClassName = "right-scroll-bar-position";
 export declare const fullWidthClassName = "width-before-scroll-bar";
 export declare const noScrollbarsClassName = "with-scroll-bars-hidden";
+/**
+ * Name of a CSS variable containing the amount of "hidden" scrollbar
+ * ! might be undefined ! use will fallback!
+ */
 export declare const removedBarSizeVariable = "--removed-body-scroll-bar-size";

dist/es5/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.removedBarSizeVariable = exports.noScrollbarsClassName = exports.fullWidthClassName = exports.zeroRightClassName = void 0;
 exports.zeroRightClassName = 'right-scroll-bar-position';
 exports.fullWidthClassName = 'width-before-scroll-bar';
 exports.noScrollbarsClassName = 'with-scroll-bars-hidden';
+/**
+ * Name of a CSS variable containing the amount of "hidden" scrollbar
+ * ! might be undefined ! use will fallback!
+ */
 exports.removedBarSizeVariable = '--removed-body-scroll-bar-size';

dist/es5/index.d.ts

 import { RemoveScrollBar } from './component';
+import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
 import { getGapWidth } from './utils';
-import { zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';
-export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth };
+export { RemoveScrollBar, zeroRightClassName, fullWidthClassName, noScrollbarsClassName, removedBarSizeVariable, getGapWidth, };

dist/es5/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGapWidth = exports.removedBarSizeVariable = exports.noScrollbarsClassName = exports.fullWidthClassName = exports.zeroRightClassName = exports.RemoveScrollBar = void 0;
 var component_1 = require("./component");
-exports.RemoveScrollBar = component_1.RemoveScrollBar;
+Object.defineProperty(exports, "RemoveScrollBar", { enumerable: true, get: function () { return component_1.RemoveScrollBar; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "zeroRightClassName", { enumerable: true, get: function () { return constants_1.zeroRightClassName; } });
+Object.defineProperty(exports, "fullWidthClassName", { enumerable: true, get: function () { return constants_1.fullWidthClassName; } });
+Object.defineProperty(exports, "noScrollbarsClassName", { enumerable: true, get: function () { return constants_1.noScrollbarsClassName; } });
+Object.defineProperty(exports, "removedBarSizeVariable", { enumerable: true, get: function () { return constants_1.removedBarSizeVariable; } });
 var utils_1 = require("./utils");
-exports.getGapWidth = utils_1.getGapWidth;
-var constants_1 = require("./constants");
-exports.zeroRightClassName = constants_1.zeroRightClassName;
-exports.fullWidthClassName = constants_1.fullWidthClassName;
-exports.noScrollbarsClassName = constants_1.noScrollbarsClassName;
-exports.removedBarSizeVariable = constants_1.removedBarSizeVariable;
+Object.defineProperty(exports, "getGapWidth", { enumerable: true, get: function () { return utils_1.getGapWidth; } });

dist/es5/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGapWidth = exports.zeroGap = void 0;
 exports.zeroGap = {
@@ -15,9 +16,5 @@ left: 0,
     var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
-    return [
-        parse(left),
-        parse(top),
-        parse(right),
-    ];
+    return [parse(left), parse(top), parse(right)];
 };
-exports.getGapWidth = function (gapMode) {
+var getGapWidth = function (gapMode) {
     if (gapMode === void 0) { gapMode = 'margin'; }
@@ -37,1 +34,2 @@ if (typeof window === 'undefined') {
 };
+exports.getGapWidth = getGapWidth;

package.json

 {
   "name": "react-remove-scroll-bar",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Removes body scroll without content _shake_",
   "main": "dist/es5/index.js",
+  "jsnext:main": "dist/es2015/index.js",
+  "module": "dist/es2015/index.js",
+  "types": "dist/es5/index.d.ts",
   "scripts": {
-    "test": "ts-react-toolbox test",
-    "bootstrap": "ts-react-toolbox init",
-    "dev": "ts-react-toolbox dev",
-    "test:ci": "ts-react-toolbox test --runInBand --coverage",
-    "build": "ts-react-toolbox build",
-    "prepublish": "yarn build",
-    "release": "ts-react-toolbox release",
-    "lint": "ts-react-toolbox lint",
-    "static": "ts-react-toolbox publish",
-    "format": "ts-react-toolbox format",
-    "analyze": "ts-react-toolbox analyze"
+    "dev": "lib-builder dev",
+    "test": "jest",
+    "test:ci": "jest --runInBand --coverage",
+    "build": "lib-builder build && yarn size:report",
+    "release": "yarn build && yarn test",
+    "size": "npx size-limit",
+    "size:report": "npx size-limit --json > .size.json",
+    "lint": "lib-builder lint",
+    "format": "lib-builder format",
+    "update": "lib-builder update",
+    "prepublish": "yarn build && yarn changelog",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "changelog:rewrite": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
@@ -25,12 +30,13 @@ "keywords": [
   "devDependencies": {
+    "@theuiteam/lib-builder": "^0.1.4",
+    "@size-limit/preset-small-lib": "^2.1.6",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "ts-react-toolbox": "^0.2.2"
+    "react-dom": "^16.8.6"
   },
   "engines": {
-    "node": ">=8.5.0"
+    "node": ">=10"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "@types/react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -42,5 +48,2 @@ "peerDependenciesMeta": {
   },
-  "jsnext:main": "dist/es2015/index.js",
-  "module": "dist/es2015/index.js",
-  "types": "dist/es5/index.d.ts",
   "files": [
@@ -52,5 +55,29 @@ "dist",
   "dependencies": {
-    "react-style-singleton": "^2.1.0",
-    "tslib": "^1.0.0"
+    "tslib": "^2.0.0",
+    "react-style-singleton": "^2.2.0"
+  },
+  "module:es2019": "dist/es2019/index.js",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{js,css,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
   }
 }

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

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

21661

increased by59.57%

Number of package files

27

increased by42.11%

Lines of code

376

increased by87.06%

Worsened metrics

Dev dependency count

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/react@18.3.12(transitive)

• + Addedreact@18.3.1(transitive)

• - Removed@types/react@17.0.83(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedtslib@1.14.1(transitive)

• Updatedreact-style-singleton@^2.2.0

• Updatedtslib@^2.0.0