How to use plugins in React with TypeScript?

[krutoo]

Hi, (sorry for lot of questions) i try to use ClickScrollPlugin like this:

const ref = useRef<OverlayScrollbarsComponentRef<'div'>>(null);

useEffect(() => {
  const component = ref.current;

  if (!component) {
    return;
  }

  component.osInstance()?.plugin(ClickScrollPlugin);
}, []);

But get error in TypeScript:

Argument of type '{ __osClickScrollPlugin: { static: () => (moveHandleRelative: (deltaMovement: number) => void, getHandleOffset: (handleRect?: DOMRect | undefined, trackRect?: DOMRect | undefined) => number, startOffset: number, handleLength: number, relativeTrackPointerOffset: number) => () => void; }; }' is not assignable to parameter of type 'InstancePlugin<string, PluginModuleInstance>'.
  Property '__osClickScrollPlugin' is incompatible with index signature.
    Type '{ static: () => (moveHandleRelative: (deltaMovement: number) => void, getHandleOffset: (handleRect?: DOMRect | undefined, trackRect?: DOMRect | undefined) => number, startOffset: number, handleLength: number, relativeTrackPointerOffset: number) => () => void; }' is not assignable to type 'PluginModule<void, PluginModuleInstance>'.
      Property 'instance' is missing in type '{ static: () => (moveHandleRelative: (deltaMovement: number) => void, getHandleOffset: (handleRect?: DOMRect | undefined, trackRect?: DOMRect | undefined) => number, startOffset: number, handleLength: number, relativeTrackPointerOffset: number) => () => void; }' but required in type '{ instance: (osInstance: OverlayScrollbars, event: InstancePluginEvent, osStatic: OverlayScrollbarsStatic) => void | PluginModuleInstance; }'.ts(2345)
overlayscrollbars.d.ts(349, 5): 'instance' is declared here.

Also looks like its not working in runtime.

I try to use it according to main page https://kingsora.github.io/OverlayScrollbars/

How to use it properly?

[KingSora]

@krutoo Plugins are registered globally, so you don't have to add them per instance.

In your entry file (where you mount your root react component) you can do:

import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';

 OverlayScrollbars.plugin(ClickScrollPlugin);

If you want clickScroll to work in your instance, you have to specify the corresponding option to true:

<OverlayScrollbarsComponent options={{ scrollbars: { clickScroll: true } }}>
</OverlayScrollbarsComponent>

[krutoo]

Thanks, i think i moved it in useEffect

[cojoclaudiu]

we should add it in useEffect?

[KingSora]

@cojoclaudiu no, you dont need any hooks or even an component in order to add plugins