improve api, readmes, overlayscrollbars-react and finish overlayscrollbars-vue

packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx

@@ -9,9 +9,9 @@ export type OverlayScrollbarsComponentProps<T extends keyof JSX.IntrinsicElement
     /** Tag of the root element. */
     element?: T;
     /** OverlayScrollbars options. */
-    options?: PartialOptions;
+    options?: PartialOptions | false | null;
     /** OverlayScrollbars events. */
-    events?: EventListeners;
+    events?: EventListeners | false | null;
   };
 
 export interface OverlayScrollbarsComponentRef<T extends keyof JSX.IntrinsicElements = 'div'> {
@@ -27,17 +27,16 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
 ) => {
   const { element = 'div', options, events, children, ...other } = props;
   const Tag = element;
-
-  const [initialize, instance] = useOverlayScrollbars({ options, events });
   const elementRef = useRef<ElementRef<T>>(null);
   const childrenRef = useRef<HTMLDivElement>(null);
+  const [initialize, instance] = useOverlayScrollbars({ options, events });
 
   useEffect(() => {
-    const { current: targetElm } = elementRef;
+    const { current: elm } = elementRef;
     const { current: childrenElm } = childrenRef;
-    if (targetElm && childrenElm) {
+    if (elm && childrenElm) {
       const osInstance = initialize({
-        target: targetElm as any,
+        target: elm as any,
         elements: {
           viewport: childrenElm,
           content: childrenElm,
@@ -46,7 +45,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
 
       return () => osInstance.destroy();
     }
-  }, [initialize]);
+  }, [initialize, element]);
 
   useImperativeHandle(
     ref,

packages/overlayscrollbars-react/src/useOverlayScrollbars.ts

@@ -1,19 +1,25 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { OverlayScrollbars } from 'overlayscrollbars';
-import type { PartialOptions, InitializationTarget, EventListeners } from 'overlayscrollbars';
+import type { InitializationTarget } from 'overlayscrollbars';
+import type {
+  OverlayScrollbarsComponentProps,
+  OverlayScrollbarsComponentRef,
+} from './OverlayScrollbarsComponent';
 
 export interface UseOverlayScrollbarsParams {
   /** OverlayScrollbars options. */
-  options?: PartialOptions;
+  options?: OverlayScrollbarsComponentProps['options'];
   /** OverlayScrollbars events. */
-  events?: EventListeners;
+  events?: OverlayScrollbarsComponentProps['events'];
 }
 
 export type UseOverlayScrollbarsInitialization = (
   target: InitializationTarget
 ) => OverlayScrollbars;
 
-export type UseOverlayScrollbarsInstance = () => OverlayScrollbars | null;
+export type UseOverlayScrollbarsInstance = () => ReturnType<
+  OverlayScrollbarsComponentRef['instance']
+>;
 
 /**
  * Hook for advanced usage of OverlayScrollbars. (When the OverlayScrollbarsComponent is not enough)
@@ -26,24 +32,21 @@ export const useOverlayScrollbars = (
   params?: UseOverlayScrollbarsParams
 ): [UseOverlayScrollbarsInitialization, UseOverlayScrollbarsInstance] => {
   const { options, events } = params || {};
-  const osInstanceRef = useRef<OverlayScrollbars | null>(null);
-  const offInitialEventsRef = useRef<(() => void) | void>();
-  const optionsRef = useRef<PartialOptions>();
-  const eventsRef = useRef<EventListeners>();
+  const osInstanceRef = useRef<ReturnType<UseOverlayScrollbarsInstance>>(null);
+  const optionsRef = useRef(options);
+  const eventsRef = useRef(events);
 
   useEffect(() => {
     const { current: instance } = osInstanceRef;
-    if (OverlayScrollbars.valid(instance) && options) {
-      instance.options(options, true);
+    if (OverlayScrollbars.valid(instance)) {
+      instance.options(options || {}, true);
     }
   }, [options]);
 
   useEffect(() => {
     const { current: instance } = osInstanceRef;
-    const { current: offInitialEvents } = offInitialEventsRef;
-    if (OverlayScrollbars.valid(instance) && events) {
-      offInitialEvents && (offInitialEventsRef.current = offInitialEvents()); // once called assign it to undefined so its not called again
-      return instance.on(events);
+    if (OverlayScrollbars.valid(instance)) {
+      instance.on(events || {}, true);
     }
   }, [events]);
 
@@ -67,8 +70,6 @@ export const useOverlayScrollbars = (
           currEvents
         ));
 
-        offInitialEventsRef.current = osInstance.on(currEvents);
-
         return osInstance;
       },
       () => osInstanceRef.current,