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

Comparing version 2.3.5 to 2.3.6

dist/es2015/component.d.ts

@@ -9,2 +9,3 @@ import * as React from 'react';
 export declare const lockAttribute = "data-scroll-locked";
+export declare const useLockAttribute: () => void;
 /**
@@ -11,0 +12,0 @@ * Removes page scrollbar and blocks page scroll when mounted

dist/es2015/component.js

@@ -22,7 +22,26 @@ import * as React from 'react';
 };
+var getCurrentUseCounter = function () {
+    var counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);
+    return isFinite(counter) ? counter : 0;
+};
+export var useLockAttribute = function () {
+    React.useEffect(function () {
+        document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
+        return function () {
+            var newCounter = getCurrentUseCounter() - 1;
+            if (newCounter <= 0) {
+                document.body.removeAttribute(lockAttribute);
+            }
+            else {
+                document.body.setAttribute(lockAttribute, newCounter.toString());
+            }
+        };
+    }, []);
+};
 /**
  * Removes page scrollbar and blocks page scroll when mounted
  */
-export var RemoveScrollBar = function (props) {
-    var noRelative = props.noRelative, noImportant = props.noImportant, _a = props.gapMode, gapMode = _a === void 0 ? 'margin' : _a;
+export var RemoveScrollBar = function (_a) {
+    var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
+    useLockAttribute();
     /*
@@ -34,9 +53,3 @@ gap will be measured on every component mount
     var gap = React.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
-    React.useEffect(function () {
-        document.body.setAttribute(lockAttribute, '');
-        return function () {
-            document.body.removeAttribute(lockAttribute);
-        };
-    }, []);
     return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };

dist/es2019/component.d.ts

@@ -9,2 +9,3 @@ import * as React from 'react';
 export declare const lockAttribute = "data-scroll-locked";
+export declare const useLockAttribute: () => void;
 /**
@@ -11,0 +12,0 @@ * Removes page scrollbar and blocks page scroll when mounted

dist/es2019/component.js

@@ -55,7 +55,25 @@ import * as React from 'react';
 `;
+const getCurrentUseCounter = () => {
+    const counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);
+    return isFinite(counter) ? counter : 0;
+};
+export const useLockAttribute = () => {
+    React.useEffect(() => {
+        document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
+        return () => {
+            const newCounter = getCurrentUseCounter() - 1;
+            if (newCounter <= 0) {
+                document.body.removeAttribute(lockAttribute);
+            }
+            else {
+                document.body.setAttribute(lockAttribute, newCounter.toString());
+            }
+        };
+    }, []);
+};
 /**
  * Removes page scrollbar and blocks page scroll when mounted
  */
-export const RemoveScrollBar = (props) => {
-    const { noRelative, noImportant, gapMode = 'margin' } = props;
+export const RemoveScrollBar = ({ noRelative, noImportant, gapMode = 'margin' }) => {
+    useLockAttribute();
     /*
@@ -67,9 +85,3 @@ gap will be measured on every component mount
     const gap = React.useMemo(() => getGapWidth(gapMode), [gapMode]);
-    React.useEffect(() => {
-        document.body.setAttribute(lockAttribute, '');
-        return () => {
-            document.body.removeAttribute(lockAttribute);
-        };
-    }, []);
     return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };

dist/es5/component.d.ts

@@ -9,2 +9,3 @@ import * as React from 'react';
 export declare const lockAttribute = "data-scroll-locked";
+export declare const useLockAttribute: () => void;
 /**
@@ -11,0 +12,0 @@ * Removes page scrollbar and blocks page scroll when mounted

dist/es5/component.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemoveScrollBar = exports.lockAttribute = void 0;
+exports.RemoveScrollBar = exports.useLockAttribute = exports.lockAttribute = void 0;
 var tslib_1 = require("tslib");
@@ -26,7 +26,27 @@ var React = tslib_1.__importStar(require("react"));
 };
+var getCurrentUseCounter = function () {
+    var counter = parseInt(document.body.getAttribute(exports.lockAttribute) || '0', 10);
+    return isFinite(counter) ? counter : 0;
+};
+var useLockAttribute = function () {
+    React.useEffect(function () {
+        document.body.setAttribute(exports.lockAttribute, (getCurrentUseCounter() + 1).toString());
+        return function () {
+            var newCounter = getCurrentUseCounter() - 1;
+            if (newCounter <= 0) {
+                document.body.removeAttribute(exports.lockAttribute);
+            }
+            else {
+                document.body.setAttribute(exports.lockAttribute, newCounter.toString());
+            }
+        };
+    }, []);
+};
+exports.useLockAttribute = useLockAttribute;
 /**
  * Removes page scrollbar and blocks page scroll when mounted
  */
-var RemoveScrollBar = function (props) {
-    var noRelative = props.noRelative, noImportant = props.noImportant, _a = props.gapMode, gapMode = _a === void 0 ? 'margin' : _a;
+var RemoveScrollBar = function (_a) {
+    var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;
+    (0, exports.useLockAttribute)();
     /*
@@ -38,10 +58,4 @@ gap will be measured on every component mount
     var gap = React.useMemo(function () { return (0, utils_1.getGapWidth)(gapMode); }, [gapMode]);
-    React.useEffect(function () {
-        document.body.setAttribute(exports.lockAttribute, '');
-        return function () {
-            document.body.removeAttribute(exports.lockAttribute);
-        };
-    }, []);
     return React.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };
 exports.RemoveScrollBar = RemoveScrollBar;

package.json

 {
   "name": "react-remove-scroll-bar",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "description": "Removes body scroll without content _shake_",
@@ -5,0 +5,0 @@ "main": "dist/es5/index.js",

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

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24953

increased by7.32%

Lines of code

450

increased by10.29%

Number of medium maintenance alerts

0

decreased by-100%

No dependency changes