react-remove-scroll
Advanced tools
Comparing version 1.0.0 to 1.0.1
@@ -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; |
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 }; |
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 |
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
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
19421
18
356
84