change framework version api

packages/overlayscrollbars-react/CHANGELOG.md

@@ -14,5 +14,4 @@ The component was rewritten using `hooks`. ([#218](https://github.com/KingSora/O
 ### Breaking Changes
 
 - The `extensions` property is removed from `OverlayScrollbarsComponent`
-- The `osInstance()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `instance()`
-- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `element()`
+- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `getElement()`

packages/overlayscrollbars-react/README.md

@@ -87,8 +87,8 @@ Additionally it has three optional properties: `element`, `options` and `events`
 The `ref` of the `OverlayScrollbarsComponent` will give you an object with which you can access the OverlayScrollbars `instance` and the root `element` of the component.  
 The ref object has two properties:
 
-- `instance`: a function which returns the OverlayScrollbars instance.
-- `element`: a function which returns the root element.
+- `osInstance`: a function which returns the OverlayScrollbars instance.
+- `getElement`: a function which returns the root element.
 
 ## Hook
 

packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx

@@ -16,9 +16,9 @@ export type OverlayScrollbarsComponentProps<T extends keyof JSX.IntrinsicElement
 
 export interface OverlayScrollbarsComponentRef<T extends keyof JSX.IntrinsicElements = 'div'> {
   /** Returns the OverlayScrollbars instance or null if not initialized. */
-  instance(): OverlayScrollbars | null;
+  osInstance(): OverlayScrollbars | null;
   /** Returns the root element. */
-  element(): ElementRef<T> | null;
+  getElement(): ElementRef<T> | null;
 }
 
 const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
@@ -29,13 +29,13 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
   const Tag = element;
   const elementRef = useRef<ElementRef<T>>(null);
   const childrenRef = useRef<HTMLDivElement>(null);
-  const [initialize, instance] = useOverlayScrollbars({ options, events });
+  const [initialize, osInstance] = useOverlayScrollbars({ options, events });
 
   useEffect(() => {
     const { current: elm } = elementRef;
     const { current: childrenElm } = childrenRef;
     if (elm && childrenElm) {
-      const osInstance = initialize({
+      const instance = initialize({
         target: elm as any,
         elements: {
           viewport: childrenElm,
@@ -43,7 +43,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
         },
       });
 
-      return () => osInstance.destroy();
+      return () => instance.destroy();
     }
   }, [initialize, element]);
 
@@ -51,8 +51,8 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
     ref,
     () => {
       return {
-        instance,
-        element: () => elementRef.current,
+        osInstance,
+        getElement: () => elementRef.current,
       };
     },
     []
@@ -60,7 +60,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
 
   return (
     // @ts-ignore
-    <Tag data-overlayscrollbars-initialize="" {...other} ref={elementRef}>
+    <Tag data-overlayscrollbars-initialize="" ref={elementRef} {...other}>
       <div ref={childrenRef}>{children}</div>
     </Tag>
   );

packages/overlayscrollbars-react/src/useOverlayScrollbars.ts

@@ -18,7 +18,7 @@ export type UseOverlayScrollbarsInitialization = (
 ) => OverlayScrollbars;
 
 export type UseOverlayScrollbarsInstance = () => ReturnType<
-  OverlayScrollbarsComponentRef['instance']
+  OverlayScrollbarsComponentRef['osInstance']
 >;
 
 /**

packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx

@@ -122,11 +122,11 @@ describe('OverlayScrollbarsComponent', () => {
     const ref: RefObject<OverlayScrollbarsComponentRef> = { current: null };
     const { container } = render(<OverlayScrollbarsComponent ref={ref} />);
 
-    const { instance, element } = ref.current!;
-    expect(instance).toBeTypeOf('function');
-    expect(element).toBeTypeOf('function');
-    expect(OverlayScrollbars.valid(instance())).toBe(true);
-    expect(element()).toBe(container.firstElementChild);
+    const { osInstance, getElement } = ref.current!;
+    expect(osInstance).toBeTypeOf('function');
+    expect(getElement).toBeTypeOf('function');
+    expect(OverlayScrollbars.valid(osInstance())).toBe(true);
+    expect(getElement()).toBe(container.firstElementChild);
   });
 
   test('options', () => {
@@ -137,7 +137,7 @@ describe('OverlayScrollbarsComponent', () => {
         ref={ref}
       />
     );
-    const instance = ref.current!.instance()!;
+    const instance = ref.current!.osInstance()!;
 
     const opts = instance.options();
     expect(opts.paddingAbsolute).toBe(true);
@@ -151,7 +151,7 @@ describe('OverlayScrollbarsComponent', () => {
     expect(newOpts.overflow.y).toBe('scroll'); //switches back to default because its not specified in the new options
 
     // instance didn't change
-    expect(instance).toBe(ref.current!.instance());
+    expect(instance).toBe(ref.current!.osInstance());
 
     rerender(
       <OverlayScrollbarsComponent
@@ -161,7 +161,7 @@ describe('OverlayScrollbarsComponent', () => {
       />
     );
 
-    const newElementInstance = ref.current!.instance()!;
+    const newElementInstance = ref.current!.osInstance()!;
     const newElementNewOpts = newElementInstance.options();
     expect(newElementInstance).not.toBe(instance);
     expect(newElementNewOpts.paddingAbsolute).toBe(false);
@@ -178,7 +178,7 @@ describe('OverlayScrollbarsComponent', () => {
     );
 
     const resetOpts = newElementInstance.options();
-    expect(newElementInstance).toBe(ref.current!.instance());
+    expect(newElementInstance).toBe(ref.current!.osInstance());
     expect(resetOpts.paddingAbsolute).toBe(false);
     expect(resetOpts.overflow.x).toBe('scroll');
     expect(resetOpts.overflow.y).toBe('scroll');
@@ -191,7 +191,7 @@ describe('OverlayScrollbarsComponent', () => {
     const { rerender } = render(
       <OverlayScrollbarsComponent events={{ updated: onUpdatedInitial }} ref={ref} />
     );
-    const instance = ref.current!.instance()!;
+    const instance = ref.current!.osInstance()!;
 
     expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
 
@@ -219,7 +219,7 @@ describe('OverlayScrollbarsComponent', () => {
     expect(onUpdated).toHaveBeenCalledTimes(2);
 
     // instance didn't change
-    expect(instance).toBe(ref.current!.instance());
+    expect(instance).toBe(ref.current!.osInstance());
 
     rerender(
       <OverlayScrollbarsComponent
@@ -229,7 +229,7 @@ describe('OverlayScrollbarsComponent', () => {
       />
     );
 
-    const newElementInstance = ref.current!.instance()!;
+    const newElementInstance = ref.current!.osInstance()!;
     expect(newElementInstance).not.toBe(instance);
     expect(onUpdatedInitial).toHaveBeenCalledTimes(3);
     expect(onUpdated).toHaveBeenCalledTimes(3);
@@ -244,7 +244,7 @@ describe('OverlayScrollbarsComponent', () => {
     );
 
     newElementInstance.update(true);
-    expect(newElementInstance).toBe(ref.current!.instance());
+    expect(newElementInstance).toBe(ref.current!.osInstance());
     expect(onUpdatedInitial).toHaveBeenCalledTimes(3);
     expect(onUpdated).toHaveBeenCalledTimes(3);
   });
@@ -253,13 +253,13 @@ describe('OverlayScrollbarsComponent', () => {
     const ref: RefObject<OverlayScrollbarsComponentRef> = { current: null };
     const { unmount } = render(<OverlayScrollbarsComponent ref={ref} />);
 
-    const { instance } = ref.current!;
+    const { osInstance } = ref.current!;
 
-    expect(OverlayScrollbars.valid(instance())).toBe(true);
+    expect(OverlayScrollbars.valid(osInstance())).toBe(true);
 
     unmount();
 
-    expect(instance()).toBeDefined();
-    expect(OverlayScrollbars.valid(instance())).toBe(false);
+    expect(osInstance()).toBeDefined();
+    expect(OverlayScrollbars.valid(osInstance())).toBe(false);
   });
 });