feat: allow ref forwarding

package.json

@@ -59,6 +59,7 @@
     "react-remove-scroll-bar": "^2.0.0",
     "react-style-singleton": "^2.0.0",
     "tslib": "^1.0.0",
+    "use-callback-ref": "^1.1.0",
     "use-sidecar": "^1.0.1"
   },
   "sideEffects": [

src/Combination.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react';
 import {RemoveScroll} from "./UI";
-import {IRemoveScrollProps} from './types';
+import {IRemoveScrollProps, RemoveScrollType} from './types';
 import SideCar from './sidecar';
 
-function ReactRemoveScroll(props: IRemoveScrollProps) {
-  return (
-    <RemoveScroll
-      {...props}
-      sideCar={SideCar}
-    />
-  );
-}
+const ReactRemoveScroll: RemoveScrollType = React.forwardRef<HTMLElement, IRemoveScrollProps>((props, ref) => (
+  <RemoveScroll
+    {...props}
+    ref={ref}
+    sideCar={SideCar}
+  />
+)) as any;
+
+ReactRemoveScroll.classNames = RemoveScroll.classNames;
 
-namespace ReactRemoveScroll {
-  export let classNames = RemoveScroll.classNames;
-}
 
 export default ReactRemoveScroll;

src/UI.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import {SideCarComponent} from 'use-sidecar';
 import {fullWidthClassName, zeroRightClassName} from 'react-remove-scroll-bar/constants';
-import {IRemoveScrollEffectProps, RemoveScrollEffectCallbacks, IRemoveScrollUIProps} from "./types";
+import {IRemoveScrollEffectProps, RemoveScrollEffectCallbacks, IRemoveScrollUIProps, RemoveScrollType} from "./types";
 import {effectCar} from "./medium";
+import {mergeRefs} from "use-callback-ref";
 
 const nothing = () => {
   return;
 };
 
-function RemoveScroll(props: IRemoveScrollUIProps) {
-  const ref = React.useRef<HTMLDivElement>(null);
+const RemoveScroll:RemoveScrollType = React.forwardRef<HTMLElement, IRemoveScrollUIProps>((props, parentRef) => {
+  const ref = React.useRef<HTMLElement>(null);
 
   const [callbacks, setCallbacks] = React.useState<RemoveScrollEffectCallbacks>({
     onScrollCapture: nothing,
@@ -22,9 +23,10 @@ function RemoveScroll(props: IRemoveScrollUIProps) {
   const SideCar: SideCarComponent<IRemoveScrollEffectProps> = sideCar;
 
   const containerProps = {
-    ref,
+    ref: mergeRefs<any>([ref, parentRef as React.MutableRefObject<HTMLElement>]),
     ...callbacks,
   };
+
   return (
     <React.Fragment>
       {enabled && (
@@ -47,20 +49,18 @@ function RemoveScroll(props: IRemoveScrollUIProps) {
       }
     </React.Fragment>
   )
-}
+}) as any;
 
 RemoveScroll.defaultProps = {
   enabled: true,
   removeScrollBar: true,
   inert: false,
 };
 
-namespace RemoveScroll {
-  export let classNames = {
-    fullWidth: fullWidthClassName,
-    zeroRight: zeroRightClassName,
-  };
-}
+RemoveScroll.classNames = {
+  fullWidth: fullWidthClassName,
+  zeroRight: zeroRightClassName,
+};
 
 export {
   RemoveScroll,

src/types.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import {RefObject} from "react";
+import {ForwardRefExoticComponent} from "react";
+import {RefAttributes} from "react";
 
 export type Axis = 'v' | 'h';
 
@@ -48,4 +50,11 @@ export interface IRemoveScrollEffectProps {
   lockRef: RefObject<HTMLElement>;
 
   setCallbacks(cb: RemoveScrollEffectCallbacks): void;
+}
+
+export interface RemoveScrollType extends ForwardRefExoticComponent<IRemoveScrollUIProps & RefAttributes<HTMLElement>> {
+  classNames: {
+    fullWidth: string,
+    zeroRight: string,
+  }
 }

yarn.lock

@@ -13318,6 +13318,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.1.0.tgz#e41d2b29aea8a568a6dbefe0af56155eac1b6884"
+  integrity sha512-a2j1dVM9UTxdIfZjbdhcD8nCDMDBkTp9rFasSBj3QPcVclYdpKbmLzqLddH3R6WuOff9W6Xo50VedPoVNu8z8A==
+
 use-sidecar@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.1.tgz#75c7a5fdacc14bd3ab64992c638e45a396ad2fad"