Simplify useMaskedScroll hook

src/components/MaskedScroll.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx/lite';
 import { HTMLAttributes, useRef } from 'react';
 import useMaskedScroll from './useMaskedScroll';
 
@@ -9,7 +8,6 @@ export default function MaskedScroll({
   hideScrollbar,
   updateMaskOnEvents,
   scrollToEndOnMount,
-  className,
   style,
   children,
   ...props
@@ -17,7 +15,7 @@ export default function MaskedScroll({
 Omit<Parameters<typeof useMaskedScroll>[0], 'ref'>) {
   const ref = useRef<HTMLDivElement>(null);
 
-  const { styleMask, classNameMask } = useMaskedScroll({
+  const { styleMask } = useMaskedScroll({
     ref,
     direction,
     fadeSize,
@@ -30,10 +28,6 @@ Omit<Parameters<typeof useMaskedScroll>[0], 'ref'>) {
   return <div
     {...props}
     ref={ref}
-    className={clsx(
-      classNameMask,
-      className,
-    )}
     style={{ ...styleMask, ...style }}
   >
     {children}

src/components/useMaskedScroll.ts

@@ -105,13 +105,11 @@ export default function useMaskedScroll({
       maskRepeat: 'no-repeat',
       transition,
       ...hideScrollbar && { scrollbarWidth: 'none' },
+      ...isVertical
+        ? { maxHeight: '100%', overflowY: 'scroll' }
+        : { maxWidth: '100%', overflowX: 'scroll' },
     };
   }, [isVertical, fadeSize, animationDuration, hideScrollbar]);
 
-  const classNameMask = useMemo(() => isVertical
-    ? 'max-h-full overflow-y-scroll'
-    : 'max-w-full overflow-x-scroll'
-  , [isVertical]);
-
-  return { styleMask, classNameMask, updateMask };
+  return { styleMask, updateMask };
 }