feat: separating dependencies (#105)

Remove dependencies on useWindowSize, useScrollPosition, and useClipboard.

.changeset/six-students-run.md

@@ -0,0 +1,5 @@
+---
+'@raddix/use-clipboard': minor
+---
+
+Remove @raddix/use-timeout of peerDependecies

.changeset/tasty-boats-tease.md

@@ -0,0 +1,6 @@
+---
+'@raddix/use-scroll-position': minor
+'@raddix/use-window-size': minor
+---
+
+Remove @raddix/use-event-listener of peerDependencies

packages/hooks/use-clipboard/package.json

@@ -33,8 +33,7 @@
   ],
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "@raddix/use-timeout": "workspace:*"
+    "react-dom": ">=16.8.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "tsup": {

packages/hooks/use-clipboard/src/index.ts

@@ -1,5 +1,4 @@
-import { useTimeout } from '@raddix/use-timeout';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export type UseClipboard = (options?: {
   timeout?: number;
@@ -10,7 +9,7 @@ export type UseClipboard = (options?: {
 export const useClipboard: UseClipboard = (options = {}) => {
   const { timeout = 2000, onError, onSuccess } = options;
   const [isCopied, setIsCopied] = useState(false);
-  const { run } = useTimeout(() => setIsCopied(false), timeout, false);
+  const idTimeout = useRef<NodeJS.Timeout | null>(null);
 
   const copy = (data: string) => {
     if ('clipboard' in navigator) {
@@ -19,13 +18,19 @@ export const useClipboard: UseClipboard = (options = {}) => {
         .then(() => {
           setIsCopied(true);
           onSuccess?.();
-          run();
+          idTimeout.current = setTimeout(() => setIsCopied(false), timeout);
         })
         .catch(err => onError?.(err));
     } else {
       onError?.(new Error('navigator.clipboard is not supported'));
     }
   };
 
+  useEffect(() => {
+    return () => {
+      if (idTimeout.current) clearTimeout(idTimeout.current);
+    };
+  }, []);
+
   return [isCopied, copy];
 };

packages/hooks/use-scroll-position/package.json

@@ -32,8 +32,7 @@
   ],
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "@raddix/use-event-listener": "workspace:*"
+    "react-dom": ">=16.8.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "tsup": {

packages/hooks/use-scroll-position/src/index.ts

@@ -1,39 +1,35 @@
 import { type RefObject, useEffect, useState } from 'react';
-import { useEventListener } from '@raddix/use-event-listener';
 
 export interface ScrollPosition {
   x: number | null;
   y: number | null;
 }
 
-export interface Options<E extends HTMLElement> {
-  target?: RefObject<E> | Document;
+interface Options {
+  target?: RefObject<HTMLElement>;
 }
 
-export const useScrollPosition = <E extends HTMLElement = HTMLDivElement>({
-  target = globalThis.document
-}: Options<E> = {}): ScrollPosition => {
+export const useScrollPosition = ({ target }: Options = {}): ScrollPosition => {
   const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({
     x: 0,
     y: 0
   });
 
-  const handle = () => {
-    const targetElement =
-      target instanceof Document ? document.documentElement : target.current;
-
-    setScrollPosition({
-      x: targetElement?.scrollLeft ?? null,
-      y: targetElement?.scrollTop ?? null
-    });
-  };
-
   useEffect(() => {
+    const element = target ? target.current : window;
+
+    const handle = () => {
+      setScrollPosition({
+        x: (target ? target.current?.scrollLeft : window.scrollX) ?? null,
+        y: (target ? target.current?.scrollTop : window.scrollY) ?? null
+      });
+    };
     handle();
+
+    element?.addEventListener('scroll', handle, { passive: true });
+    return () => element?.removeEventListener('scroll', handle);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEventListener('scroll', handle, { target, passive: true });
-
   return scrollPosition;
 };

packages/hooks/use-scroll-position/tests/index.test.ts

@@ -42,9 +42,17 @@ describe('useScrollPosition test:', () => {
     expect(result.current).toEqual({ x: 0, y: 0 });
 
     act(() => {
-      document.documentElement.scrollTop = 100;
-      document.documentElement.scrollLeft = 50;
-      document.dispatchEvent(new Event('scroll'));
+      Object.defineProperty(window, 'scrollY', {
+        value: 100,
+        configurable: true
+      });
+
+      Object.defineProperty(window, 'scrollX', {
+        value: 50,
+        configurable: true
+      });
+
+      window.dispatchEvent(new Event('scroll'));
     });
 
     expect(result.current).toEqual({ x: 50, y: 100 });

packages/hooks/use-window-size/package.json

@@ -32,8 +32,7 @@
   ],
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "@raddix/use-event-listener": "workspace:*"
+    "react-dom": ">=16.8.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "tsup": {

packages/hooks/use-window-size/src/index.ts

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { useEventListener } from '@raddix/use-event-listener';
 
 interface Size {
   width: number;
@@ -21,9 +20,10 @@ export const useWindowSize = (): Size => {
 
   useEffect(() => {
     handleResize();
-  }, []);
+    window.addEventListener('resize', handleResize);
 
-  useEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   return windowSize;
 };