);
};
diff --git a/src/hooks/useElementSize/useElementSize.ts b/src/hooks/useElementSize/useElementSize.ts
index 6293d457..871c68f6 100644
--- a/src/hooks/useElementSize/useElementSize.ts
+++ b/src/hooks/useElementSize/useElementSize.ts
@@ -2,50 +2,83 @@ import type { RefObject } from 'react';
import { useEffect, useState } from 'react';
+import { getElement } from '@/utils/helpers';
+
interface ElementSize {
height: number;
width: number;
}
-type UseElementSizeTarget = RefObject;
+/** The use element size target element type */
+export type UseElementSizeTarget =
+ | (() => Element)
+ | Element
+ | RefObject;
+
+export interface UseElementSizeReturn {
+ value: ElementSize;
+}
+
+export interface UseElementSize {
+ (
+ target: Target,
+ initialSize?: ElementSize
+ ): UseElementSizeReturn;
-type UseElementSizeReturn = ElementSize;
+ (
+ initialSize?: ElementSize,
+ target?: never
+ ): { ref: (node: Target) => void } & UseElementSizeReturn;
+}
/**
* @name useElementSize
- * @description - Hook that returns the width and height of the element
+ * @description - Hook that observes and returns the width and height of element
* @category Elements
*
- * @param {UseElementSizeTarget} target The target element to observe
- * @param {ElementSize} [initialSize] The initial size of the element
- * @returns {UseElementSizeReturn} An object containing the width and height of the element
+ * @overload
+ * @template Target The target element type.
+ * @param {UseElementSizeTarget} target The target element to observe.
+ * @param {ElementSize} [initialSize = { width: 0, height: 0 }]
+ * @returns {UseElementSizeReturn} An object containing the current width and height of the element.
*
* @example
- * const { width, height } = useElementSize(elementRef);
+ * const { value } = useElementSize(elementRef);
+ *
+ * @overload
+ * @param {ElementSize} [initialSize = { width: 0, height: 0 }] The initial size of the element.
+ * @returns { { ref: (node: Target) => void } & UseElementSizeReturn } A reference function to attach to the element to observe size changes.
+ *
+ * @example
+ * const { ref, value } = useElementSize({ width: 100, height: 100 });
*/
-export const useElementSize = (
- target: UseElementSizeTarget,
- initialSize: ElementSize = { height: 0, width: 0 }
-): UseElementSizeReturn => {
- const [width, setWidth] = useState(initialSize.width);
- const [height, setHeight] = useState(initialSize.height);
+export const useElementSize = ((...params: any[]) => {
+ const target = (typeof params[1] === 'undefined' ? undefined : params[0]) as
+ | UseElementSizeTarget
+ | undefined;
+
+ const initialSize = (target ? params[1] : params[0]) as ElementSize | undefined;
+
+ const [size, setSize] = useState(initialSize ?? { width: 0, height: 0 });
+ const [internalRef, setInternalRef] = useState();
useEffect(() => {
+ if (!target && !internalRef) return;
+ const element = (target ? getElement(target) : internalRef) as Element;
+
const observer = new ResizeObserver(([entry]) => {
const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
- setWidth(width);
- setHeight(height);
+ setSize({ width, height });
});
- if (target.current) {
- observer.observe(target.current);
- }
+ if (element) observer.observe(element);
return () => {
observer.disconnect();
};
- }, [target]);
+ }, [internalRef, target]);
- return { width, height };
-};
+ if (target) return { value: size };
+ return { ref: setInternalRef, value: size };
+}) as UseElementSize;
diff --git a/src/hooks/useField/useField.demo.tsx b/src/hooks/useField/useField.demo.tsx
index 0914516c..16c5e68f 100644
--- a/src/hooks/useField/useField.demo.tsx
+++ b/src/hooks/useField/useField.demo.tsx
@@ -45,8 +45,8 @@ const Demo = () => {
{
Press Enter key
- Count of Enter key presses: {counter.value}
+ Count of key presses: {counter.value}
);
diff --git a/src/hooks/useKeyPressEvent/useKeyPressEvent.ts b/src/hooks/useKeyPressEvent/useKeyPressEvent.ts
index e537ee8e..81350467 100644
--- a/src/hooks/useKeyPressEvent/useKeyPressEvent.ts
+++ b/src/hooks/useKeyPressEvent/useKeyPressEvent.ts
@@ -39,17 +39,49 @@ export interface UseKeyPressEvent {
/**
* @name useKeyPressEvent
- * @description - Hook that listents for key press and execute callback function
+ * @description - Hook that listens for key press events on specified targets
* @category Sensors
*
- * @param {UseKeyPressEventKey} key The key or array of keys to listen for
- * @param {UseEventListenerTarget} [target=window] The target to attach the event listener to
- * @param {(event: KeyboardEvent) => void} callback The callback function to be executed when the specified key or keys are pressed
- * @param {UseEventListenerOptions} [options] The options for the event listener
+ * @overload
+ * @param {UseKeyPressEventKey} key The key or array of keys to listen for.
+ * @param {Window} target The window object to attach the event listener to.
+ * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.
+ * @param {UseEventListenerOptions} [options] The options for the event listener.
* @returns {void}
*
* @example
- * useKeyPressEvent('Enter', () => console.log('Enter key pressed'));
+ * useKeyPressEvent('Enter', window, () => console.log('Enter key pressed'));
+ *
+ * @overload
+ * @param {UseKeyPressEventKey} key The key or array of keys to listen for.
+ * @param {Document} target The document object to attach the event listener to.
+ * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.
+ * @param {UseEventListenerOptions} [options] The options for the event listener.
+ * @returns {void}
+ *
+ * @example
+ * useKeyPressEvent('Enter', document, () => console.log('Enter key pressed'));
+ *
+ * @overload
+ * @template Target The target element type.
+ * @param {UseKeyPressEventKey} key The key or array of keys to listen for.
+ * @param {Target} target The target element to attach the event listener to.
+ * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.
+ * @param {UseEventListenerOptions} [options] The options for the event listener.
+ * @returns {void}
+ *
+ * @example
+ * useKeyPressEvent('Enter', ref, () => console.log('Enter key pressed'));
+ *
+ * @overload
+ * @template Target extends Element
+ * @param {UseKeyPressEventKey} key The key or array of keys to listen for.
+ * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.
+ * @param {UseEventListenerOptions} [options] The options for the event listener.
+ * @returns {void}
+ *
+ * @example
+ * useKeyPressEvent('Enter', (event) => console.log('Enter key pressed'));
*/
export const useKeyPressEvent = ((...params: any[]) => {
const keys = (Array.isArray(params[0]) ? params[0] : [params[0]]) as UseKeyPressEventKey;
diff --git a/src/hooks/useLastChanged/useLastChanged.demo.tsx b/src/hooks/useLastChanged/useLastChanged.demo.tsx
index d6e6d58d..1cb38ee4 100644
--- a/src/hooks/useLastChanged/useLastChanged.demo.tsx
+++ b/src/hooks/useLastChanged/useLastChanged.demo.tsx
@@ -9,9 +9,9 @@ const Demo = () => {
return (