use react version on website

website/src/components/md/Pre.tsx

@@ -1,26 +1,13 @@
-import { useEffect, useRef } from 'react';
-import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { ComponentProps } from 'react';
 
-export const Pre = ({ children }: ComponentProps<'pre'>) => {
-  const ref = useRef(null);
-  const [initialize, instance] = useOverlayScrollbarsIdle({
-    options: {
+export const Pre = ({ children }: ComponentProps<'pre'>) => (
+  <OverlayScrollbarsComponent
+    element="pre"
+    options={{
       paddingAbsolute: true,
       scrollbars: { autoHide: 'leave' },
-    },
-  });
-
-  useEffect(() => {
-    if (ref.current) {
-      initialize(ref.current);
-      return () => instance()?.destroy();
-    }
-  }, []);
-
-  return (
-    <pre ref={ref} data-overlayscrollbars-initialize>
-      {children}
-    </pre>
-  );
-};
+    }}>
+    {children}
+  </OverlayScrollbarsComponent>
+);

website/src/hooks/useOverlayScrollbarsIdle.ts

@@ -1,66 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import type {
-  UseOverlayScrollbarsParams,
-  UseOverlayScrollbarsInitialization,
-  UseOverlayScrollbarsInstance,
-} from 'overlayscrollbars-react';
-import type { InitializationTarget } from 'overlayscrollbars';
-
-type Defer = [
-  defer: (callback: () => any, options?: IdleRequestOptions) => void,
-  clear: () => void
-];
-
-const createDefer = (idle?: boolean): Defer => {
-  let id: number;
-  if (typeof window !== 'undefined' && window.requestIdleCallback) {
-    const setTFn = idle ? window.requestIdleCallback : window.requestAnimationFrame;
-    const clearTFn = idle ? window.cancelIdleCallback : window.cancelAnimationFrame;
-    return [
-      (callback: () => any, options?: IdleRequestOptions) => {
-        clearTFn(id);
-        id = setTFn(callback, options);
-      },
-      () => clearTFn(id),
-    ];
-  }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  return [(callback: () => any) => callback(), () => {}];
-};
-
-export const useOverlayScrollbarsIdle = (
-  params?: UseOverlayScrollbarsParams
-): [
-  (...args: Parameters<UseOverlayScrollbarsInitialization>) => void,
-  UseOverlayScrollbarsInstance
-] => {
-  const [deferIdle, clearIdle] = useMemo<Defer>(() => createDefer(true), []);
-  const [deferRAF, clearRAF] = useMemo<Defer>(() => createDefer(), []);
-  const [initialize, instance] = useOverlayScrollbars(params);
-
-  useEffect(() => {
-    return () => {
-      clearRAF();
-      clearIdle();
-      instance()?.destroy();
-    };
-  }, []);
-
-  return useMemo(
-    () => [
-      (target: InitializationTarget) => {
-        deferIdle(
-          () => {
-            deferRAF(() => {
-              initialize(target);
-            });
-          },
-          { timeout: 2000 }
-        );
-      },
-      instance,
-    ],
-    [initialize, instance]
-  );
-};

website/src/pages/_app.tsx

@@ -4,7 +4,7 @@ import 'overlayscrollbars/overlayscrollbars.css';
 import { useEffect } from 'react';
 import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
-import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import favicon from '~/assets/favicon.ico';
 import { Pre } from '~/components/md/Pre';
 import { Heading } from '~/components/md/Heading';
@@ -18,7 +18,7 @@ const generateHeading = (props: ComponentProps<'h1'>, tag: HeadingProps['tag'])
 );
 
 const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => {
-  const [initialize, instance] = useOverlayScrollbarsIdle();
+  const [initialize, instance] = useOverlayScrollbars({ defer: true });
 
   useEffect(() => {
     initialize(document.body);

website/src/pages/index.tsx

@@ -1,6 +1,5 @@
 import classnames from 'classnames';
-import { useEffect, useRef } from 'react';
-import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { PageContainer } from '~/components/PageContainer';
 import { Icon } from '~/components/Icon';
 import logo from '~/assets/img/logo.svg';
@@ -23,16 +22,6 @@ const separator = (children: ReactNode) => (
 );
 
 const IndexPage: NextPage = () => {
-  const usedByRef = useRef<HTMLDivElement | null>(null);
-  const [initialize, instance] = useOverlayScrollbarsIdle();
-
-  useEffect(() => {
-    if (usedByRef.current) {
-      initialize(usedByRef.current);
-      return () => instance()?.destroy();
-    }
-  }, []);
-
   return (
     <PageContainer className="px-6">
       <div className="mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44">
@@ -56,7 +45,7 @@ const IndexPage: NextPage = () => {
         overlay scrollbars and keeps the native functionality and feeling.
       </p>
       {separator('used by')}
-      <div ref={usedByRef} data-overlayscrollbars-initialize>
+      <OverlayScrollbarsComponent>
         <div className="flex justify-center">
           <div className={classnames('inline-flex  items-center gap-6 py-6', styles.usedBy)}>
             <div
@@ -72,7 +61,7 @@ const IndexPage: NextPage = () => {
             </div>
           </div>
         </div>
-      </div>
+      </OverlayScrollbarsComponent>
 
       {separator(
         <a href="https://github.com/KingSora/OverlayScrollbars" target="_blank" rel="noreferrer">