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 2.3.0 to 2.4.0

4

dist/es2015/handleScroll.js

@@ -65,5 +65,3 @@ var elementCouldBeVScrolled = function (node) {

(targetInLock && (endTarget.contains(target) || endTarget === target)));
if (0) {
}
else if (isDeltaPositive &&
if (isDeltaPositive &&
((noOverscroll && availableScroll === 0) ||

@@ -70,0 +68,0 @@ (!noOverscroll && delta > availableScroll))) {

@@ -82,3 +82,3 @@ import * as React from 'react';

var cancelingAxis = activeAxis.current || currentAxis;
return handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true);
return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
}, []);

@@ -85,0 +85,0 @@ var shouldPrevent = React.useCallback(function (_event) {

@@ -12,2 +12,7 @@ import * as React from 'react';

export interface ChildrenNode {
/**
* if forwardProps is false - children should be ReactNode
* and it would be wrapper with a div
* @see {@link IRemoveScrollSelfProps.as}
*/
forwardProps?: false;

@@ -17,2 +22,7 @@ children: React.ReactNode;

export interface ChildrenForward {
/**
* if forwardProps is true - children should be single Element
* which would NOT with a div
* @see {@link IRemoveScrollSelfProps.as}
*/
forwardProps: true;

@@ -22,9 +32,38 @@ children: React.ReactElement;

export interface IRemoveScrollSelfProps {
/**
* disables "event isolation" (suppressing of events happening outside of the Lock)
* @default false
*/
noIsolation?: boolean;
/**
* enabled complete Lock isolation using `pointer-events:none` for anything outside the Lock
* you probably don't need it, except you do
* @default false
* @see {IRemoveScrollSelfProps.noIsolation}
*/
inert?: boolean;
/**
* allows pinch-zoom, however might work not perfectly for normal scroll
*/
allowPinchZoom?: boolean;
/**
* switches on/off the behavior of the component
*/
enabled?: boolean;
/**
* Controls the body scroll bar removal
* @default false
*/
removeScrollBar?: boolean;
className?: string;
removeScrollBar?: boolean;
style?: React.CSSProperties;
/**
* array of refs to other Elements, which should be considered as a part of the Lock
*/
shards?: Array<React.RefObject<any> | HTMLElement>;
/**
* Control host node used for the lock.
* @default 'div'
*/
as?: string | React.ElementType;
}

@@ -31,0 +70,0 @@ export declare type IRemoveScrollProps = IRemoveScrollSelfProps & (ChildrenForward | ChildrenNode);

import { RemoveScrollUIType } from './types';
/**
* Removes scrollbar from the page and contain the scroll within the Lock
*/
declare const RemoveScroll: RemoveScrollUIType;
export { RemoveScroll };

@@ -9,2 +9,5 @@ import * as tslib_1 from "tslib";

};
/**
* Removes scrollbar from the page and contain the scroll within the Lock
*/
var RemoveScroll = React.forwardRef(function (props, parentRef) {

@@ -17,11 +20,12 @@ var ref = React.useRef(null);

}), callbacks = _a[0], setCallbacks = _a[1];
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]);
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
var SideCar = sideCar;
var containerProps = tslib_1.__assign({ ref: useMergeRefs([
ref,
parentRef
]) }, rest, callbacks);
var containerRef = useMergeRefs([
ref,
parentRef
]);
var containerProps = tslib_1.__assign({}, rest, callbacks);
return (React.createElement(React.Fragment, null,
enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
forwardProps ? (React.cloneElement(React.Children.only(children), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
forwardProps ? (React.cloneElement(React.Children.only(children), tslib_1.__assign({}, containerProps, { ref: containerRef }))) : (React.createElement(Container, tslib_1.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
});

@@ -28,0 +32,0 @@ RemoveScroll.defaultProps = {

@@ -67,5 +67,3 @@ "use strict";

(targetInLock && (endTarget.contains(target) || endTarget === target)));
if (0) {
}
else if (isDeltaPositive &&
if (isDeltaPositive &&
((noOverscroll && availableScroll === 0) ||

@@ -72,0 +70,0 @@ (!noOverscroll && delta > availableScroll))) {

@@ -84,3 +84,3 @@ "use strict";

var cancelingAxis = activeAxis.current || currentAxis;
return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis == 'h' ? deltaX : deltaY, true);
return handleScroll_1.handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
}, []);

@@ -87,0 +87,0 @@ var shouldPrevent = React.useCallback(function (_event) {

@@ -12,2 +12,7 @@ import * as React from 'react';

export interface ChildrenNode {
/**
* if forwardProps is false - children should be ReactNode
* and it would be wrapper with a div
* @see {@link IRemoveScrollSelfProps.as}
*/
forwardProps?: false;

@@ -17,2 +22,7 @@ children: React.ReactNode;

export interface ChildrenForward {
/**
* if forwardProps is true - children should be single Element
* which would NOT with a div
* @see {@link IRemoveScrollSelfProps.as}
*/
forwardProps: true;

@@ -22,9 +32,38 @@ children: React.ReactElement;

export interface IRemoveScrollSelfProps {
/**
* disables "event isolation" (suppressing of events happening outside of the Lock)
* @default false
*/
noIsolation?: boolean;
/**
* enabled complete Lock isolation using `pointer-events:none` for anything outside the Lock
* you probably don't need it, except you do
* @default false
* @see {IRemoveScrollSelfProps.noIsolation}
*/
inert?: boolean;
/**
* allows pinch-zoom, however might work not perfectly for normal scroll
*/
allowPinchZoom?: boolean;
/**
* switches on/off the behavior of the component
*/
enabled?: boolean;
/**
* Controls the body scroll bar removal
* @default false
*/
removeScrollBar?: boolean;
className?: string;
removeScrollBar?: boolean;
style?: React.CSSProperties;
/**
* array of refs to other Elements, which should be considered as a part of the Lock
*/
shards?: Array<React.RefObject<any> | HTMLElement>;
/**
* Control host node used for the lock.
* @default 'div'
*/
as?: string | React.ElementType;
}

@@ -31,0 +70,0 @@ export declare type IRemoveScrollProps = IRemoveScrollSelfProps & (ChildrenForward | ChildrenNode);

import { RemoveScrollUIType } from './types';
/**
* Removes scrollbar from the page and contain the scroll within the Lock
*/
declare const RemoveScroll: RemoveScrollUIType;
export { RemoveScroll };

@@ -11,2 +11,5 @@ "use strict";

};
/**
* Removes scrollbar from the page and contain the scroll within the Lock
*/
var RemoveScroll = React.forwardRef(function (props, parentRef) {

@@ -19,11 +22,12 @@ var ref = React.useRef(null);

}), callbacks = _a[0], setCallbacks = _a[1];
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom"]);
var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = tslib_1.__rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
var SideCar = sideCar;
var containerProps = tslib_1.__assign({ ref: use_callback_ref_1.useMergeRefs([
ref,
parentRef
]) }, rest, callbacks);
var containerRef = use_callback_ref_1.useMergeRefs([
ref,
parentRef
]);
var containerProps = tslib_1.__assign({}, rest, callbacks);
return (React.createElement(React.Fragment, null,
enabled && (React.createElement(SideCar, { sideCar: medium_1.effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
forwardProps ? (React.cloneElement(React.Children.only(children), containerProps)) : (React.createElement("div", tslib_1.__assign({}, containerProps, { className: className }), children))));
forwardProps ? (React.cloneElement(React.Children.only(children), tslib_1.__assign({}, containerProps, { ref: containerRef }))) : (React.createElement(Container, tslib_1.__assign({}, containerProps, { className: className, ref: containerRef }), children))));
});

@@ -30,0 +34,0 @@ exports.RemoveScroll = RemoveScroll;

{
"name": "react-remove-scroll",
"version": "2.3.0",
"version": "2.4.0",
"description": "Disables scroll outside of `children` node.",

@@ -5,0 +5,0 @@ "main": "dist/es5/index.js",

@@ -54,3 +54,3 @@ <div align="center">

But if you are using _shadowbox_ of some sort - you dont need it.
- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` expect the Lock(+shard).
- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` except the Lock(+shards).
React portals not friendly, might lead to production issues. Enable only for __rare__ cases, when you have to disable scrollbars somewhere on the page(except body, Lock and shards).

@@ -57,0 +57,0 @@ - `[forwardProps]` - will forward all props to the `children`

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