Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-remove-scroll

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-remove-scroll - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/es2015/aggresiveCapture.d.ts

13

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;

42

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 };

2

dist/es2015/index.d.ts
import { RemoveScroll } from './component';
export { RemoveScroll };
export { RemoveScroll, };
import { RemoveScroll } from './component';
export { RemoveScroll };
export { RemoveScroll, };

@@ -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;

@@ -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;
import { RemoveScroll } from './component';
export { RemoveScroll };
export { RemoveScroll, };
{
"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 <thekashey@gmail.com>",

@@ -41,4 +43,4 @@ "license": "MIT",

"dependencies": {
"react-remove-scroll-bar": "^1.1.1"
"react-remove-scroll-bar": "^1.1.3"
}
}

@@ -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
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc