@siberiacancode/reactuse 0.0.60 → 0.0.61

package/dist/esm/utils/helpers/time/getDate.js

@@ -1,3 +1,3 @@
-/* @license @siberiacancode/reactuse v0.0.60 */
+/* @license @siberiacancode/reactuse v0.0.61 */
 var e=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:new Date,t=e.getSeconds(),n=e.getMinutes(),r=e.getHours();return{seconds:t,minutes:n,hours:r,meridiemHours:{value:r%12==0?12:r%12,type:r>=12?"pm":"am"},day:e.getDate(),month:e.getMonth()+1,year:e.getFullYear(),timestamp:e.getTime()}};export{e as getDate};
 //# sourceMappingURL=getDate.js.map

package/dist/esm/utils/types/index.js

@@ -1,2 +1,2 @@
-/* @license @siberiacancode/reactuse v0.0.60 */
+/* @license @siberiacancode/reactuse v0.0.61 */
 //# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -240,6 +240,44 @@ type UseCounter = {
  */
 declare const useCounter: UseCounter;
 
+/** The css variable target element type */
+type UseCssVarTarget = RefObject<Element | null | undefined> | (() => Element) | Element;
+/** The css variable return type */
+interface UseCssVarReturn {
+    /** The value of the CSS variable */
+    value: string;
+    /** Set the value of the CSS variable */
+    set: (value: string) => void;
+}
+interface UseCssVar {
+    <Target extends UseCssVarTarget>(target: Target, key: string, initialValue?: string): UseCssVarReturn;
+    (key: string, initialValue?: string): UseCssVarReturn;
+}
+/**
+ * @name useCssVar
+ * @description - Hook that returns the value of a CSS variable
+ * @category Utilities
+ *
+ * @overload
+ * @param {string} key The CSS variable key
+ * @param {string} initialValue The initial value of the CSS variable
+ * @returns {UseCssVarReturn} The object containing the value of the CSS variable
+ *
+ * @example
+ * const { value, set } = useCssVar('color', 'red');
+ *
+ * @overload
+ * @template Target The target element
+ * @param {Target} target The target element
+ * @param {string} key The CSS variable key
+ * @param {string} initialValue The initial value of the CSS variable
+ * @returns {UseCssVarReturn} The object containing the value of the CSS variable
+ *
+ * @example
+ * const { value, set } = useCssVar(ref, 'color', 'red');
+ */
+declare const useCssVar: UseCssVar;
+
 /**
  * @name useDebounceCallback
  * @description - Hook that creates a debounced callback and returns a stable reference of it
@@ -757,7 +795,7 @@ type UseHotkeysHotkeys = string[] | string;
  * @param {UseHotkeysHotkeys} hotkeys The key or keys to listen for
  * @param {(event: KeyboardEvent) => void} callback The callback function to be called when the hotkey is pressed
  * @param {UseEventListenerTarget} [options.target=window] The target to attach the event listeners to
- * @param {boolean} [options.enabled=true] Enable or disable the event listeners
+ * @param {boolean} [options.enabled=true] The enable or disable the event listeners
  * @param {boolean} [options.preventDefault=true] Whether to prevent the default behavior of the event
  * @param {Record<string, string>} [options.aliasMap] Alias map for hotkeys
  * @returns {useKeysPressedReturns} Array of strings with keys that were press
@@ -1491,6 +1529,66 @@ interface UseMutationReturn<Body, Data> {
  */
 declare const useMutation: <Body, Data>(callback: (body: Body) => Promise<Data>, options?: UseMutationOptions<Data>) => UseMutationReturn<Body, Data>;
 
+/** The mutation observer target element type */
+type UseMutationObserverTarget = RefObject<Element | null | undefined> | (() => Element) | Element | Window | Document;
+/** The mutation observer return type */
+interface UseMutationObserverReturn {
+    /** The mutation observer entries */
+    stop: () => void;
+    /** The mutation observer instance */
+    observer: MutationObserver;
+}
+/** The mutation observer options type */
+interface UseMutationObserverOptions extends MutationObserverInit {
+    /** The enabled state of the mutation observer */
+    enabled?: boolean;
+}
+type UseResizeObserver$1 = {
+    <Target extends UseMutationObserverTarget | UseMutationObserverTarget[]>(target: Target, callback: MutationCallback, options?: UseMutationObserverOptions): UseMutationObserverReturn;
+    <Target extends UseMutationObserverTarget | UseMutationObserverTarget[]>(callback: MutationCallback, options?: UseMutationObserverOptions, target?: never): UseMutationObserverReturn & {
+        ref: (node: Target) => void;
+    };
+};
+/**
+ * @name useMutationObserver
+ * @description - Hook that gives you mutation observer state
+ * @category Browser
+ *
+ * @overload
+ * @template Target The target element
+ * @param {MutationCallback} callback The callback to execute when mutation is detected
+ * @param {boolean} [options.enabled=true] The enabled state of the mutation observer
+ * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed
+ * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed
+ * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed
+ * @param {boolean} [options.subtree]  Set to true if mutations to not just target, but also target's descendants are to be observed
+ * @param {boolean} [options.characterDataOldValue] Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded
+ * @param {boolean} [options.attributeOldValue]  Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
+ * @param {string[]} [options.attributeFilter] Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
+ * @returns {UseMutationObserverReturn & { ref: (node: Target) => void }} An object containing the mutation observer state
+ *
+ * @example
+ * const { ref, observer, stop } = useMutationObserver(() => console.log('callback'))
+ *
+ * @overload
+ * @template Target The target element
+ * @param {Target} target The target element to observe
+ * @param {MutationCallback} callback The callback to execute when mutation is detected
+ * @param {boolean} [options.enabled=true] The enabled state of the mutation observer
+ * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed
+ * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed
+ * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed
+ * @param {boolean} [options.subtree]  Set to true if mutations to not just target, but also target's descendants are to be observed
+ * @param {boolean} [options.characterDataOldValue] Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded
+ * @param {boolean} [options.attributeOldValue]  Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
+ * @param {string[]} [options.attributeFilter] Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
+ * @returns {UseMutationObserverReturn} An object containing the mutation observer state
+ *
+ * @example
+ * const { observer, stop } = useMutationObserver(ref, () => console.log('callback'))
+ */
+declare const useMutationObserver: UseResizeObserver$1;
+
 declare global {
     interface Navigator {
         readonly connection: Connection;
@@ -2483,4 +2581,4 @@ declare const getDate: (now?: Date) => {
     timestamp: number;
 };
 
-export { type GetElementTarget, debounce, getDate, getElement, getRetry, isClient, isPermissionAllowed, throttle, useAsync, useBattery, useBoolean, useBreakpoints, useBrowserLanguage, useClickOutside, useClipboard, useCounter, useDebounceCallback, useDebounceValue, useDefault, useDidUpdate, useDisclosure, useDocumentEvent, useDocumentTitle, useDocumentVisibility, useEvent, useEventListener, useEyeDropper, useFavicon, useField, useFileDialog, useFps, useFullscreen, useGamepad, useGeolocation, useHash, useHotkeys, useHover, useIdle, useImage, useInfiniteScroll, useIntersectionObserver, useInterval, useIsFirstRender, useIsomorphicLayoutEffect, useKeyPress, useKeyPressEvent, useKeyboard, useKeysPressed, useList, useLocalStorage, useLogger, useLongPress, useMap, useMeasure, useMediaQuery, useMemory, useMount, useMouse, useMutation, useNetwork, useOffsetPagination, useOnline, useOperatingSystem, useOrientation, usePageLeave, usePaint, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePreferredReducedMotion, usePrevious, useQuery, useQueue, useRaf, useRafValue, useRenderCount, useRenderInfo, useRerender, useResizeObserver, useScript, useSessionStorage, useSet, useShare, useStep, useStopwatch, useStorage, useTextSelection, useTime, useTimeout, useToggle, useUnmount, useWebSocket, useWindowEvent, useWindowSize, useWizard };
+export { type GetElementTarget, debounce, getDate, getElement, getRetry, isClient, isPermissionAllowed, throttle, useAsync, useBattery, useBoolean, useBreakpoints, useBrowserLanguage, useClickOutside, useClipboard, useCounter, useCssVar, useDebounceCallback, useDebounceValue, useDefault, useDidUpdate, useDisclosure, useDocumentEvent, useDocumentTitle, useDocumentVisibility, useEvent, useEventListener, useEyeDropper, useFavicon, useField, useFileDialog, useFps, useFullscreen, useGamepad, useGeolocation, useHash, useHotkeys, useHover, useIdle, useImage, useInfiniteScroll, useIntersectionObserver, useInterval, useIsFirstRender, useIsomorphicLayoutEffect, useKeyPress, useKeyPressEvent, useKeyboard, useKeysPressed, useList, useLocalStorage, useLogger, useLongPress, useMap, useMeasure, useMediaQuery, useMemory, useMount, useMouse, useMutation, useMutationObserver, useNetwork, useOffsetPagination, useOnline, useOperatingSystem, useOrientation, usePageLeave, usePaint, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePreferredReducedMotion, usePrevious, useQuery, useQueue, useRaf, useRafValue, useRenderCount, useRenderInfo, useRerender, useResizeObserver, useScript, useSessionStorage, useSet, useShare, useStep, useStopwatch, useStorage, useTextSelection, useTime, useTimeout, useToggle, useUnmount, useWebSocket, useWindowEvent, useWindowSize, useWizard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "description": "Ultimate tool",
   "license": "MIT",
   "author": {

package/dist/cjs/_rollupPluginBabelHelpers-DaULt_UR.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-DaULt_UR.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/cjs/hooks/useMutationObserver.js

@@ -1,3 +0,0 @@
-/* @license @siberiacancode/reactuse v0.0.60 */
-"use strict";var e=require("react");exports.useMutationObserver=function(r,n,t){var u=e.useRef(),c=e.useRef(null);return e.useEffect((function(){var e="function"==typeof t?t():t;return(e||c.current)&&(u.current=new MutationObserver(r),u.current.observe(e||c.current,n)),function(){var e;null===(e=u.current)||void 0===e||e.disconnect()}}),[r,n]),c};
-//# sourceMappingURL=useMutationObserver.js.map

package/dist/cjs/hooks/useMutationObserver.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMutationObserver.js","sources":["../../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport function useMutationObserver<Element extends HTMLElement>(\n  callback: MutationCallback,\n  options: MutationObserverInit,\n  target?: HTMLElement | (() => HTMLElement) | null\n) {\n  const observer = useRef<MutationObserver>();\n  const ref: RefObject<Element> = useRef(null);\n\n  useEffect(() => {\n    const targetElement = typeof target === 'function' ? target() : target;\n\n    if (targetElement || ref.current) {\n      observer.current = new MutationObserver(callback);\n      observer.current.observe(targetElement || ref.current!, options);\n    }\n\n    return () => {\n      observer.current?.disconnect();\n    };\n  }, [callback, options]);\n\n  return ref;\n}\n"],"names":["callback","options","target","observer","useRef","ref","useEffect","targetElement","current","MutationObserver","observe","_observer$current","disconnect"],"mappings":";gEAGO,SACLA,EACAC,EACAC,GAEA,IAAMC,EAAWC,EAAAA,SACXC,EAA0BD,SAAO,MAevC,OAbAE,EAAAA,WAAU,WACR,IAAMC,EAAkC,mBAAXL,EAAwBA,IAAWA,EAOhE,OALIK,GAAiBF,EAAIG,WACvBL,EAASK,QAAU,IAAIC,iBAAiBT,GACxCG,EAASK,QAAQE,QAAQH,GAAiBF,EAAIG,QAAUP,IAGnD,WAAM,IAAAU,EACK,QAAhBA,EAAAR,EAASK,eAAO,IAAAG,GAAhBA,EAAkBC,aAEtB,GAAG,CAACZ,EAAUC,IAEPI,CACT"}

package/dist/esm/_rollupPluginBabelHelpers-BdfjLHhW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-BdfjLHhW.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/hooks/useMutationObserver.js

@@ -1,3 +0,0 @@
-/* @license @siberiacancode/reactuse v0.0.60 */
-import{useRef as r,useEffect as n}from"react";function t(t,e,u){var c=r(),o=r(null);return n((function(){var r="function"==typeof u?u():u;return(r||o.current)&&(c.current=new MutationObserver(t),c.current.observe(r||o.current,e)),function(){var r;null===(r=c.current)||void 0===r||r.disconnect()}}),[t,e]),o}export{t as useMutationObserver};
-//# sourceMappingURL=useMutationObserver.js.map

package/dist/esm/hooks/useMutationObserver.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMutationObserver.js","sources":["../../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport function useMutationObserver<Element extends HTMLElement>(\n  callback: MutationCallback,\n  options: MutationObserverInit,\n  target?: HTMLElement | (() => HTMLElement) | null\n) {\n  const observer = useRef<MutationObserver>();\n  const ref: RefObject<Element> = useRef(null);\n\n  useEffect(() => {\n    const targetElement = typeof target === 'function' ? target() : target;\n\n    if (targetElement || ref.current) {\n      observer.current = new MutationObserver(callback);\n      observer.current.observe(targetElement || ref.current!, options);\n    }\n\n    return () => {\n      observer.current?.disconnect();\n    };\n  }, [callback, options]);\n\n  return ref;\n}\n"],"names":["useMutationObserver","callback","options","target","observer","useRef","ref","useEffect","targetElement","current","MutationObserver","observe","_observer$current","disconnect"],"mappings":";8CAGO,SAASA,EACdC,EACAC,EACAC,GAEA,IAAMC,EAAWC,IACXC,EAA0BD,EAAO,MAevC,OAbAE,GAAU,WACR,IAAMC,EAAkC,mBAAXL,EAAwBA,IAAWA,EAOhE,OALIK,GAAiBF,EAAIG,WACvBL,EAASK,QAAU,IAAIC,iBAAiBT,GACxCG,EAASK,QAAQE,QAAQH,GAAiBF,EAAIG,QAAUP,IAGnD,WAAM,IAAAU,EACK,QAAhBA,EAAAR,EAASK,eAAO,IAAAG,GAAhBA,EAAkBC,aAEtB,GAAG,CAACZ,EAAUC,IAEPI,CACT"}