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"