fix: wire up gapMode, fixes #65

src/UI.tsx

@@ -27,6 +27,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
       preventScrollOnFocus,
       style,
       as,
+      gapMode,
       ...rest
     } = props;
 
@@ -36,12 +37,18 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
 
     const appliedLockProps = {
         ...restProps,
+
+        as,
+        style,
+
         sideCar,
+
         shards,
+
         allowPinchZoom,
-        as,
+        gapMode,
         inert,
-        style,
+
         enabled: enabled && scrollLock,
     } as const;
 

src/types.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import ReactFocusLock from 'react-focus-lock/UI';
 import {ComponentProps} from "react";
 
+// TODO: reuse from react-remove-scroll-bar
+export type GapMode = 'padding' | 'margin';
+
 export interface LockProps {
   onMouseDown?: ((e: React.MouseEvent) => void) | undefined;
 
@@ -49,6 +52,12 @@ export interface CommonProps {
    * @see https://github.com/theKashey/react-remove-scroll#usage
    */
   allowPinchZoom?: boolean | undefined;
+  /**
+   * [scroll-lock] Controls how body scroll removal is supported. Possible values - `margin` or `padding`
+   * @default 'margin'
+   * @see https://github.com/theKashey/react-remove-scroll-bar#gapmode
+   */
+  gapMode?: GapMode;
 
   /**
    * a list of elements which should be considered as a part of the lock