diff --git a/package.json b/package.json
index 589da46..309ab5a 100644
--- a/package.json
+++ b/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": [
diff --git a/src/Combination.tsx b/src/Combination.tsx
index 044cdaa..2f0f355 100644
--- a/src/Combination.tsx
+++ b/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 (
-
- );
-}
+const ReactRemoveScroll: RemoveScrollType = React.forwardRef((props, ref) => (
+
+)) as any;
+
+ReactRemoveScroll.classNames = RemoveScroll.classNames;
-namespace ReactRemoveScroll {
- export let classNames = RemoveScroll.classNames;
-}
export default ReactRemoveScroll;
\ No newline at end of file
diff --git a/src/UI.tsx b/src/UI.tsx
index efbdd72..9a248cf 100644
--- a/src/UI.tsx
+++ b/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(null);
+const RemoveScroll:RemoveScrollType = React.forwardRef((props, parentRef) => {
+ const ref = React.useRef(null);
const [callbacks, setCallbacks] = React.useState({
onScrollCapture: nothing,
@@ -22,9 +23,10 @@ function RemoveScroll(props: IRemoveScrollUIProps) {
const SideCar: SideCarComponent = sideCar;
const containerProps = {
- ref,
+ ref: mergeRefs([ref, parentRef as React.MutableRefObject]),
...callbacks,
};
+
return (
{enabled && (
@@ -47,7 +49,7 @@ function RemoveScroll(props: IRemoveScrollUIProps) {
}
)
-}
+}) as any;
RemoveScroll.defaultProps = {
enabled: true,
@@ -55,12 +57,10 @@ RemoveScroll.defaultProps = {
inert: false,
};
-namespace RemoveScroll {
- export let classNames = {
- fullWidth: fullWidthClassName,
- zeroRight: zeroRightClassName,
- };
-}
+RemoveScroll.classNames = {
+ fullWidth: fullWidthClassName,
+ zeroRight: zeroRightClassName,
+};
export {
RemoveScroll,
diff --git a/src/types.tsx b/src/types.tsx
index 195c368..b5f473f 100644
--- a/src/types.tsx
+++ b/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;
setCallbacks(cb: RemoveScrollEffectCallbacks): void;
+}
+
+export interface RemoveScrollType extends ForwardRefExoticComponent> {
+ classNames: {
+ fullWidth: string,
+ zeroRight: string,
+ }
}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index b150e73..1b89e05 100644
--- a/yarn.lock
+++ b/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"