react-remove-scroll - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/es2015/component.d.ts

@@ -6,3 +6,5 @@ import * as React from 'react';
     forwardProps?: boolean;
+    enabled?: boolean;
     className?: string;
+    removeScrollBar?: boolean;
 }
@@ -13,4 +15,15 @@ export declare class RemoveScroll extends React.Component<RemoveScrollProps> {
     private ref;
+    static classNames: {
+        fullWidth: string;
+        zeroRight: string;
+    };
+    static defaultProps: {
+        enabled: boolean;
+        removeScrollBar: boolean;
+    };
     componentDidMount(): void;
     componentWillUnmount(): void;
+    componentDidUpdate(oldProps: RemoveScrollProps): void;
+    enable(): void;
+    disable(): void;
     shouldPrevent: (event: any) => void;
@@ -17,0 +30,0 @@ shouldCancel: (name: string, delta: number, target: any, should: boolean) => void;

dist/es2015/component.js

 import * as tslib_1 from "tslib";
 import * as React from 'react';
-import { RemoveScrollBar } from 'react-remove-scroll-bar';
+import { RemoveScrollBar, fullWidthClassName, zeroRightClassName } from 'react-remove-scroll-bar';
 import { handleScroll } from "./handleScroll";
+import { aggressive } from './aggresiveCapture';
 export var getTouchY = function (event) { return event.changedTouches ? event.changedTouches[0].clientY : 0; };
+var classNames = {
+    fullWidth: fullWidthClassName,
+    zeroRight: zeroRightClassName,
+};
 var RemoveScroll = (function (_super) {
@@ -39,15 +44,31 @@ tslib_1.__extends(RemoveScroll, _super);
     RemoveScroll.prototype.componentDidMount = function () {
+        this.componentDidUpdate({ enabled: false });
+    };
+    RemoveScroll.prototype.componentWillUnmount = function () {
+        this.disable();
+    };
+    RemoveScroll.prototype.componentDidUpdate = function (oldProps) {
+        if (oldProps.enabled !== this.props.enabled) {
+            if (this.props.enabled) {
+                this.enable();
+            }
+            else {
+                this.disable();
+            }
+        }
+    };
+    RemoveScroll.prototype.enable = function () {
         if (typeof document !== 'undefined') {
-            document.addEventListener('wheel', this.shouldPrevent, { passive: false });
-            document.addEventListener('touchmove', this.shouldPrevent, { passive: false });
+            document.addEventListener('wheel', this.shouldPrevent, aggressive);
+            document.addEventListener('touchmove', this.shouldPrevent, aggressive);
         }
     };
-    RemoveScroll.prototype.componentWillUnmount = function () {
+    RemoveScroll.prototype.disable = function () {
         if (typeof window !== 'undefined') {
-            document.removeEventListener('wheel', this.shouldPrevent, { passive: false });
-            document.removeEventListener('touchmove', this.shouldPrevent, { passive: false });
+            document.removeEventListener('wheel', this.shouldPrevent, aggressive);
+            document.removeEventListener('touchmove', this.shouldPrevent, aggressive);
         }
     };
     RemoveScroll.prototype.render = function () {
-        var _a = this.props, forwardProps = _a.forwardProps, children = _a.children, className = _a.className;
+        var _a = this.props, forwardProps = _a.forwardProps, children = _a.children, className = _a.className, removeScrollBar = _a.removeScrollBar, enabled = _a.enabled;
         var props = {
@@ -61,3 +82,3 @@ ref: this.ref,
         return (React.createElement(React.Fragment, null,
-            React.createElement(RemoveScrollBar, null),
+            removeScrollBar && enabled && React.createElement(RemoveScrollBar, { gapMode: "margin" }),
             forwardProps
@@ -67,4 +88,9 @@ ? React.cloneElement(React.Children.only(children), props)
     };
+    RemoveScroll.classNames = classNames;
+    RemoveScroll.defaultProps = {
+        enabled: true,
+        removeScrollBar: true,
+    };
     return RemoveScroll;
 }(React.Component));
 export { RemoveScroll };

dist/es2015/index.d.ts

 import { RemoveScroll } from './component';
-export { RemoveScroll };
+export { RemoveScroll, };

dist/es2015/index.js

 import { RemoveScroll } from './component';
-export { RemoveScroll };
+export { RemoveScroll, };

dist/es5/component.d.ts

@@ -6,3 +6,5 @@ import * as React from 'react';
     forwardProps?: boolean;
+    enabled?: boolean;
     className?: string;
+    removeScrollBar?: boolean;
 }
@@ -13,4 +15,15 @@ export declare class RemoveScroll extends React.Component<RemoveScrollProps> {
     private ref;
+    static classNames: {
+        fullWidth: string;
+        zeroRight: string;
+    };
+    static defaultProps: {
+        enabled: boolean;
+        removeScrollBar: boolean;
+    };
     componentDidMount(): void;
     componentWillUnmount(): void;
+    componentDidUpdate(oldProps: RemoveScrollProps): void;
+    enable(): void;
+    disable(): void;
     shouldPrevent: (event: any) => void;
@@ -17,0 +30,0 @@ shouldCancel: (name: string, delta: number, target: any, should: boolean) => void;

dist/es5/component.js

@@ -7,3 +7,8 @@ "use strict";
 var handleScroll_1 = require("./handleScroll");
+var aggresiveCapture_1 = require("./aggresiveCapture");
 exports.getTouchY = function (event) { return event.changedTouches ? event.changedTouches[0].clientY : 0; };
+var classNames = {
+    fullWidth: react_remove_scroll_bar_1.fullWidthClassName,
+    zeroRight: react_remove_scroll_bar_1.zeroRightClassName,
+};
 var RemoveScroll = (function (_super) {
@@ -42,15 +47,31 @@ tslib_1.__extends(RemoveScroll, _super);
     RemoveScroll.prototype.componentDidMount = function () {
+        this.componentDidUpdate({ enabled: false });
+    };
+    RemoveScroll.prototype.componentWillUnmount = function () {
+        this.disable();
+    };
+    RemoveScroll.prototype.componentDidUpdate = function (oldProps) {
+        if (oldProps.enabled !== this.props.enabled) {
+            if (this.props.enabled) {
+                this.enable();
+            }
+            else {
+                this.disable();
+            }
+        }
+    };
+    RemoveScroll.prototype.enable = function () {
         if (typeof document !== 'undefined') {
-            document.addEventListener('wheel', this.shouldPrevent, { passive: false });
-            document.addEventListener('touchmove', this.shouldPrevent, { passive: false });
+            document.addEventListener('wheel', this.shouldPrevent, aggresiveCapture_1.aggressive);
+            document.addEventListener('touchmove', this.shouldPrevent, aggresiveCapture_1.aggressive);
         }
     };
-    RemoveScroll.prototype.componentWillUnmount = function () {
+    RemoveScroll.prototype.disable = function () {
         if (typeof window !== 'undefined') {
-            document.removeEventListener('wheel', this.shouldPrevent, { passive: false });
-            document.removeEventListener('touchmove', this.shouldPrevent, { passive: false });
+            document.removeEventListener('wheel', this.shouldPrevent, aggresiveCapture_1.aggressive);
+            document.removeEventListener('touchmove', this.shouldPrevent, aggresiveCapture_1.aggressive);
         }
     };
     RemoveScroll.prototype.render = function () {
-        var _a = this.props, forwardProps = _a.forwardProps, children = _a.children, className = _a.className;
+        var _a = this.props, forwardProps = _a.forwardProps, children = _a.children, className = _a.className, removeScrollBar = _a.removeScrollBar, enabled = _a.enabled;
         var props = {
@@ -64,3 +85,3 @@ ref: this.ref,
         return (React.createElement(React.Fragment, null,
-            React.createElement(react_remove_scroll_bar_1.RemoveScrollBar, null),
+            removeScrollBar && enabled && React.createElement(react_remove_scroll_bar_1.RemoveScrollBar, { gapMode: "margin" }),
             forwardProps
@@ -70,4 +91,9 @@ ? React.cloneElement(React.Children.only(children), props)
     };
+    RemoveScroll.classNames = classNames;
+    RemoveScroll.defaultProps = {
+        enabled: true,
+        removeScrollBar: true,
+    };
     return RemoveScroll;
 }(React.Component));
 exports.RemoveScroll = RemoveScroll;

dist/es5/index.d.ts

 import { RemoveScroll } from './component';
-export { RemoveScroll };
+export { RemoveScroll, };

package.json

 {
   "name": "react-remove-scroll",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Disables scroll outside of `children` node.",
@@ -19,3 +19,5 @@ "main": "dist/es5/index.js",
   },
-  "keywords": ["scroll"],
+  "keywords": [
+    "scroll"
+  ],
   "author": "Anton Korzunov <[e-mail]>",
@@ -41,4 +43,4 @@ "license": "MIT",
   "dependencies": {
-    "react-remove-scroll-bar": "^1.1.1"
+    "react-remove-scroll-bar": "^1.1.3"
   }
 }

README.md

@@ -22,5 +22,7 @@ react-remove-scroll
 - `children`
+- `[enabled]` - activate or deactivate component behaviour without removing it.
 - `[noIsolation]` - disables outer event capturing
 - `[forwardProps]` - will forward all props to the `children`
 - `[className]` - className for an internal div
+- `[removeScrollBar]` - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll still disabled).
 
@@ -47,2 +49,15 @@ ## Internal div
 
+## Position:fixed elements
+To properly size these elements please add a special className to them.
+```jsx
+import {RemoveScroll} from 'react-remove-scroll';
+
+// to make "width: 100%"
+<div className={cx(classWithPositionFixed, RemoveScroll.classNames.fullWidth)} />
+
+// to make "right:0"
+<div className={cx(classWithPositionFixed, RemoveScroll.classNames.zeroRight)} />
+```
+See [react-remove-scroll-bar](https://github.com/theKashey/react-remove-scroll-bar) documentation for details.
+
 ## More than one lock
@@ -65,5 +80,8 @@ This library will silence any scroll(wheel, touch) event outside of whitelisted node. To be able to use more than one lock:
  - [react-scrolllock](https://github.com/jossmac/react-scrolllock) - React scroll lock
- - [scroll-lock](https://github.com/FL3NKEY/scroll-lock) - DOM scroll lock  
+ - [scroll-lock](https://github.com/FL3NKEY/scroll-lock) - DOM scroll lock
+ - [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) - DOM scroll lock
+ 
+ > This package is relative smaller(1), more react friendly(2), works with non zero body margins(3), and has a better "overscroll" management. 
 
 # License
 MIT

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

Improved metrics

Total package byte prevSize

19421

increased by32.06%

Number of package files

18

increased by28.57%

Lines of code

356

increased by50.85%

Number of lines in readme file

84

increased by27.27%

Dependency changes

• Updatedreact-remove-scroll-bar@^1.1.3