main 🧊 add use auto scroll

Author: debabin

packages/core/src/bundle/hooks/index.js

@@ -1,6 +1,7 @@
 export * from './useActiveElement/useActiveElement';
 export * from './useAsync/useAsync';
 export * from './useAudio/useAudio';
+export * from './useAutoScroll/useAutoScroll';
 export * from './useBattery/useBattery';
 export * from './useBluetooth/useBluetooth';
 export * from './useBoolean/useBoolean';

packages/core/src/bundle/hooks/useAutoScroll/useAutoScroll.js

@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+import { getElement } from '@/utils/helpers';
+import { useRefState } from '../useRefState/useRefState';
+/**
+ * @name useAutoScroll
+ * @description - Hook that automatically scrolls a list element to the bottom
+ * @category Sensors
+ *
+ * @overload
+ * @param {HookTarget} target The target element to auto-scroll
+ * @param {boolean} [options.enabled] Whether auto-scrolling is enabled
+ * @returns {void}
+ *
+ * @example
+ * useAutoScroll(ref);
+ *
+ * @overload
+ * @template Target
+ * @param {boolean} [options.enabled] Whether auto-scrolling is enabled
+ * @returns {StateRef<Target>} A React ref to attach to the list element
+ *
+ * @example
+ * const ref = useAutoScroll();
+ */
+export const useAutoScroll = (...params) => {
+  const target = typeof params[0] !== 'object' || 'current' in params[0] ? params[0] : undefined;
+  const options = params[1] || (typeof params[0] === 'object' ? params[0] : {});
+  const { enabled = true } = options;
+  const internalRef = useRefState();
+  useEffect(() => {
+    if (!enabled || (!target && !internalRef.state)) return;
+    const element = target ? getElement(target) : internalRef.state;
+    if (!element) return;
+    let shouldAutoScroll = true;
+    let touchStartY = 0;
+    let lastScrollTop = 0;
+    const onCheckScrollPosition = () => {
+      const { scrollHeight, clientHeight, scrollTop } = element;
+      const maxScrollHeight = scrollHeight - clientHeight;
+      const scrollThreshold = maxScrollHeight / 2;
+      if (scrollTop < lastScrollTop) shouldAutoScroll = false;
+      else if (maxScrollHeight - scrollTop <= scrollThreshold) shouldAutoScroll = true;
+      lastScrollTop = scrollTop;
+    };
+    const onWheel = (event) => {
+      if (event.deltaY < 0) shouldAutoScroll = false;
+      else onCheckScrollPosition();
+    };
+    const onTouchStart = (event) => {
+      touchStartY = event.touches[0].clientY;
+    };
+    const onTouchMove = (event) => {
+      const touchEndY = event.touches[0].clientY;
+      const deltaY = touchStartY - touchEndY;
+      if (deltaY < 0) shouldAutoScroll = false;
+      else onCheckScrollPosition();
+      touchStartY = touchEndY;
+    };
+    const onMutation = () => {
+      if (!shouldAutoScroll) return;
+      element.scrollTo({ top: element.scrollHeight });
+    };
+    element.addEventListener('wheel', onWheel);
+    element.addEventListener('touchstart', onTouchStart);
+    element.addEventListener('touchmove', onTouchMove);
+    const observer = new MutationObserver(onMutation);
+    observer.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+      element.removeEventListener('wheel', onWheel);
+      element.removeEventListener('touchstart', onTouchStart);
+      element.removeEventListener('touchmove', onTouchMove);
+    };
+  }, [enabled, target, internalRef.state]);
+  if (target) return;
+  return internalRef;
+};

packages/core/src/bundle/hooks/useClickOutside/useClickOutside.js

@@ -31,7 +31,6 @@ export const useClickOutside = (...params) => {
   const internalCallbackRef = useRef(callback);
   internalCallbackRef.current = callback;
   useEffect(() => {
-    console.log('target', target);
     if (!target && !internalRef.state) return;
     const onClick = (event) => {
       const element = target ? getElement(target) : internalRef.current;

packages/core/src/bundle/hooks/useEvent/useEvent.js

@@ -13,10 +13,10 @@ import { useCallback, useRef } from 'react';
  * const onClick = useEvent(() => console.log('clicked'));
  */
 export const useEvent = (callback) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  const internalCallbackRef = useRef(callback);
+  internalCallbackRef.current = callback;
   return useCallback((...args) => {
-    const fn = callbackRef.current;
+    const fn = internalCallbackRef.current;
     return fn(...args);
   }, []);
 };

packages/core/src/bundle/hooks/useKeyPress/useKeyPress.js

@@ -13,7 +13,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @returns {boolean} The pressed state of the key
  *
  * @example
- * const isKeyPressed = useKeyPress('a', window);
+ * const isKeyPressed = useKeyPress(ref, 'a');
  *
  * @overload
  * @template Target The target element type
@@ -32,8 +32,8 @@ export const useKeyPress = (...params) => {
   const internalRef = useRefState(window);
   const keyRef = useRef(key);
   keyRef.current = key;
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  const internalCallbackRef = useRef(callback);
+  internalCallbackRef.current = callback;
   useEffect(() => {
     if (!target && !internalRef.state) return;
     const element = target ? getElement(target) : internalRef.current;
@@ -46,7 +46,7 @@ export const useKeyPress = (...params) => {
           : keyboardEvent.key === keyRef.current
       ) {
         setPressed(true);
-        callbackRef.current?.(true, keyboardEvent);
+        internalCallbackRef.current?.(true, keyboardEvent);
       }
     };
     const onKeyUp = (event) => {
@@ -57,7 +57,7 @@ export const useKeyPress = (...params) => {
           : keyboardEvent.key === keyRef.current
       ) {
         setPressed(false);
-        callbackRef.current?.(false, keyboardEvent);
+        internalCallbackRef.current?.(false, keyboardEvent);
       }
     };
     element.addEventListener('keydown', onKeyDown);

packages/core/src/bundle/hooks/useKeyboard/useKeyboard.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { getElement, isTarget } from '@/utils/helpers';
 import { useRefState } from '../useRefState/useRefState';
 /**
@@ -7,31 +7,55 @@ import { useRefState } from '../useRefState/useRefState';
  * @category Sensors
  *
  * @overload
- * @param {HookTarget | Window} target The target to attach the event listeners to
- * @param {UseKeyboardOptions} [options] The keyboard event options
+ * @param {HookTarget} target The target to attach the event listeners to
+ * @param {KeyboardEventHandler} callback The callback function to be invoked on key down
+ * @returns {void}
+ *
+ * @example
+ * useKeyboard(ref, (event) => console.log('key down'));
+ *
+ * @overload
+ * @param {HookTarget} target The target to attach the event listeners to
+ * @param {UseKeyboardEventOptions} [options] The keyboard event options
  * @returns {void}
  *
  * @example
  * useKeyboard(ref, { onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });
  *
  * @overload
  * @template Target The target element type
- * @param {UseKeyboardOptions} [options] The keyboard event options
+ * @param {KeyboardEventHandler} callback The callback function to be invoked on key down
+ * @returns {{ ref: StateRef<Target> }} An object containing the ref
+ *
+ * @example
+ * const ref = useKeyboard((event) => console.log('key down'));
+ *
+ * @overload
+ * @template Target The target element type
+ * @param {UseKeyboardEventOptions} [options] The keyboard event options
  * @returns {{ ref: StateRef<Target> }} An object containing the ref
  *
  * @example
  * const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });
  */
 export const useKeyboard = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
-  const options = target ? params[1] : params[0];
+  const options = target
+    ? typeof params[1] === 'object'
+      ? params[1]
+      : { onKeyDown: params[1] }
+    : typeof params[0] === 'object'
+      ? params[0]
+      : { onKeyDown: params[0] };
   const internalRef = useRefState(window);
+  const internalOptionsRef = useRef(options);
+  internalOptionsRef.current = options;
   useEffect(() => {
     if (!target && !internalRef.state) return;
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;
-    const onKeyDown = (event) => options?.onKeyDown?.(event);
-    const onKeyUp = (event) => options?.onKeyUp?.(event);
+    const onKeyDown = (event) => internalOptionsRef.current?.onKeyDown?.(event);
+    const onKeyUp = (event) => internalOptionsRef.current?.onKeyUp?.(event);
     element.addEventListener('keydown', onKeyDown);
     element.addEventListener('keyup', onKeyUp);
     return () => {

packages/core/src/bundle/hooks/useLockCallback/useLockCallback.js

@@ -12,13 +12,13 @@ import { useRef } from 'react';
  */
 export const useLockCallback = (callback) => {
   const lockRef = useRef(false);
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  const internalCallbackRef = useRef(callback);
+  internalCallbackRef.current = callback;
   return async (...args) => {
     if (lockRef.current) return;
     lockRef.current = true;
     try {
-      return await callbackRef.current(...args);
+      return await internalCallbackRef.current(...args);
     } finally {
       lockRef.current = false;
     }

packages/core/src/bundle/hooks/useWindowEvent/useWindowEvent.js

@@ -3,7 +3,7 @@ import { useEventListener } from '../useEventListener/useEventListener';
 /**
  * @name useWindowEvent
  * @description - Hook attaches an event listener to the window object for the specified event
- * @category Browser
+ * @category Events
  *
  * @template Event Key of window event map.
  * @param {Event} event The event to listen for.

packages/core/src/bundle/hooks/useWindowScroll/useWindowScroll.js

@@ -8,7 +8,7 @@ export const scrollTo = ({ x, y, behavior = 'smooth' }) => {
 /**
  * @name useWindowScroll
  * @description - Hook that manages the window scroll position
- * @category Browser
+ * @category Sensors
  *
  * @returns {UseWindowScrollReturn} An object containing the current window scroll position
  *

packages/core/src/hooks/index.ts

@@ -1,6 +1,7 @@
 export * from './useActiveElement/useActiveElement';
 export * from './useAsync/useAsync';
 export * from './useAudio/useAudio';
+export * from './useAutoScroll/useAutoScroll';
 export * from './useBattery/useBattery';
 export * from './useBluetooth/useBluetooth';
 export * from './useBoolean/useBoolean';