feat: add optional reserveScrollBarGap (#484)

Author: huksley

react-responsive-modal/__tests__/index.test.tsx

@@ -260,6 +260,26 @@ describe('modal', () => {
       );
       expect(document.body.style.overflow).toBe('');
     });
+    it('should reserve scroll bar gap', () => {
+      const scrollBarWidth = 42;
+      const innerWidth = 500;
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: innerWidth,
+      });
+      Object.defineProperty(document.documentElement, 'clientWidth', {
+        writable: true,
+        configurable: true,
+        value: innerWidth - scrollBarWidth,
+      });
+      render(
+        <Modal open={true} onClose={() => null} reserveScrollBarGap={true}>
+          <div>modal content</div>
+        </Modal>
+      );
+      expect(document.body.style.paddingRight).toBe(`${scrollBarWidth}px`);
+    });
   });
 
   describe('closeIcon', () => {

react-responsive-modal/package.json

@@ -47,11 +47,11 @@
   "size-limit": [
     {
       "path": "dist/react-responsive-modal.cjs.production.min.js",
-      "limit": "4.0 KB"
+      "limit": "4.1 KB"
     },
     {
       "path": "dist/react-responsive-modal.esm.js",
-      "limit": "4.0 KB"
+      "limit": "4.1 KB"
     }
   ],
   "dependencies": {

react-responsive-modal/src/index.tsx

@@ -128,6 +128,10 @@ export interface ModalProps {
    * ARIA description for modal
    */
   ariaDescribedby?: string;
+  /**
+   * Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock 
+   */
+  reserveScrollBarGap?: boolean;
   /**
    * id attribute for modal
    */
@@ -179,6 +183,7 @@ export const Modal = React.forwardRef(
       onOverlayClick,
       onAnimationEnd,
       children,
+      reserveScrollBarGap,
     }: ModalProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
@@ -200,7 +205,7 @@ export const Modal = React.forwardRef(
     useModalManager(refModal, open);
 
     // Hook used to manage the scroll
-    useScrollLock(refModal, open, showPortal, blockScroll);
+    useScrollLock(refModal, open, showPortal, blockScroll, reserveScrollBarGap);
 
     const handleOpen = () => {
       if (

react-responsive-modal/src/useScrollLock.ts

@@ -5,20 +5,21 @@ export const useScrollLock = (
   refModal: React.RefObject<Element>,
   open: boolean,
   showPortal: boolean,
-  blockScroll: boolean
+  blockScroll: boolean,
+  reserveScrollBarGap?: boolean
 ) => {
   const oldRef = useRef<Element | null>(null);
 
   useEffect(() => {
     if (open && refModal.current && blockScroll) {
       oldRef.current = refModal.current;
-      disableBodyScroll(refModal.current);
+      disableBodyScroll(refModal.current, { reserveScrollBarGap });
     }
     return () => {
       if (oldRef.current) {
         enableBodyScroll(oldRef.current);
         oldRef.current = null;
       }
     };
-  }, [open, showPortal, refModal]);
+  }, [open, showPortal, refModal, blockScroll, reserveScrollBarGap]);
 };