main 🧊 add use css var, use mutation observer

Author: debabin

src/hooks/index.ts

@@ -6,6 +6,7 @@ export { useBrowserLanguage } from './useBrowserLanguage/useBrowserLanguage';
 export { useClickOutside } from './useClickOutside/useClickOutside';
 export { useClipboard } from './useClipboard/useClipboard';
 export { useCounter } from './useCounter/useCounter';
+export { useCssVar } from './useCssVar/useCssVar';
 export { useDebounceCallback } from './useDebounceCallback/useDebounceCallback';
 export { useDebounceValue } from './useDebounceValue/useDebounceValue';
 export { useDefault } from './useDefault/useDefault';
@@ -49,6 +50,7 @@ export { useMemory } from './useMemory/useMemory';
 export { useMount } from './useMount/useMount';
 export { useMouse } from './useMouse/useMouse';
 export { useMutation } from './useMutation/useMutation';
+export { useMutationObserver } from './useMutationObserver/useMutationObserver';
 export { useNetwork } from './useNetwork/useNetwork';
 export { useOffsetPagination } from './useOffsetPagination/useOffsetPagination';
 export { useOnline } from './useOnline/useOnline';

src/hooks/useCssVar/useCssVar.demo.tsx

@@ -0,0 +1,25 @@
+import { useCssVar } from './useCssVar';
+
+const Demo = () => {
+  const key = '--color';
+  const colorVar = useCssVar(key, '#7fa998');
+  const style = {
+    color: 'var(--color)'
+  };
+
+  const switchColor = () => {
+    if (colorVar.value === '#df8543') colorVar.set('#7fa998');
+    else colorVar.set('#df8543');
+  };
+
+  return (
+    <>
+      <p style={style}>Sample text, {colorVar.value}</p>
+      <button type='button' onClick={switchColor}>
+        Change Color
+      </button>
+    </>
+  );
+};
+
+export default Demo;

src/hooks/useCssVar/useCssVar.ts

@@ -0,0 +1,101 @@
+import type { RefObject } from 'react';
+import { useState } from 'react';
+
+import { getElement } from '@/utils/helpers';
+
+import { useMount } from '../useMount/useMount';
+import { useMutationObserver } from '../useMutationObserver/useMutationObserver';
+
+/** The css variable target element type */
+export type UseCssVarTarget = RefObject<Element | null | undefined> | (() => Element) | Element;
+
+/** The css variable return type */
+export interface UseCssVarReturn {
+  /** The value of the CSS variable */
+  value: string;
+  /** Set the value of the CSS variable */
+  set: (value: string) => void;
+}
+
+export 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');
+ */
+export const useCssVar = ((...params: any[]) => {
+  const target = (typeof params[0] === 'object' ? params[0] : undefined) as
+    | UseCssVarTarget
+    | undefined;
+  const key = (target ? params[1] : params[0]) as string;
+  const initialValue = (target ? params[2] : params[1]) as string | undefined;
+
+  const [value, setValue] = useState(initialValue ?? '');
+
+  const set = (value: string) => {
+    const element = getElement(target ?? window?.document?.documentElement) as HTMLElement;
+
+    if (element.style) {
+      if (!value) {
+        element.style.removeProperty(key);
+        setValue(value);
+        return;
+      }
+
+      element.style.setProperty(key, value);
+      setValue(value);
+    }
+  };
+
+  const updateCssVar = () => {
+    const element = getElement(target ?? window?.document?.documentElement) as HTMLElement;
+    if (!element) return;
+
+    const value = window
+      .getComputedStyle(element as Element)
+      .getPropertyValue(key)
+      ?.trim();
+
+    setValue(value ?? initialValue);
+  };
+
+  useMount(() => {
+    if (initialValue) set(initialValue);
+  });
+
+  useMutationObserver(window, updateCssVar, {
+    attributeFilter: ['style', 'class']
+  });
+
+  return {
+    value,
+    set
+  };
+}) as UseCssVar;

src/hooks/useDocumentTitle/useDocumentTitle.ts

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
-import { useMutationObserver } from '../useMutationObserver';
+import { useMutationObserver } from '../useMutationObserver/useMutationObserver';
 
 /** The use document title options type */
 export interface UseDocumentTitleOptions {
@@ -38,13 +38,13 @@ export function useDocumentTitle(
   const [title, setTitle] = useState(value ?? document.title);
 
   useMutationObserver(
+    document.head.querySelector('title')!,
     () => {
       if (document && document.title !== title) {
         setTitle(document.title);
       }
     },
-    { childList: true },
-    document.head.querySelector('title')
+    { childList: true }
   );
 
   useIsomorphicLayoutEffect(() => {

src/hooks/useFullscreen/useFullscreen.ts

@@ -81,7 +81,7 @@ export const useFullscreen = ((...params: any[]) => {
     | undefined;
   const options = (target ? params[1] : params[0]) as UseFullScreenOptions | undefined;
 
-  const internalRef = useRef<Element>(null);
+  const internalRef = useRef<Element>();
   const [value, setValue] = useState(options?.initialValue ?? false);
 
   const onChange = () => {

src/hooks/useHotkeys/useHotkeys.ts

@@ -41,7 +41,7 @@ export type UseHotkeysKey = { key: string; code: string; alias: 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

src/hooks/useMutationObserver.ts

@@ -0,0 +1,38 @@
+import { useRef, useState } from 'react';
+
+import { useMutationObserver } from './useMutationObserver';
+
+export const Demo = () => {
+  const [observed, setObserved] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useMutationObserver(
+    buttonRef,
+    (mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes') {
+          setObserved(true);
+        }
+      }
+    },
+    { attributes: true }
+  );
+
+  const addAttribute = () => {
+    if (!buttonRef.current) return;
+
+    buttonRef.current.setAttribute('data-mut', 'hello world');
+  };
+
+  return (
+    <div>
+      <div>{observed ? 'Observed attribute change to node' : 'No changes observed yet'}</div>
+
+      <button ref={buttonRef} type='button' onClick={addAttribute} disabled={observed}>
+        {observed ? 'Added Attribute To Node' : 'Add Attribute To Node'}
+      </button>
+    </div>
+  );
+};
+
+export default Demo;

src/hooks/useMutationObserver/useMutationObserver.demo.tsx

@@ -0,0 +1,132 @@
+import type { RefObject } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { getElement } from '@/utils/helpers';
+
+/** The mutation observer target element type */
+export type UseMutationObserverTarget =
+  | RefObject<Element | null | undefined>
+  | (() => Element)
+  | Element
+  | Window
+  | Document;
+
+/** The mutation observer return type */
+export interface UseMutationObserverReturn {
+  /** The mutation observer entries */
+  stop: () => void;
+  /** The mutation observer instance */
+  observer: MutationObserver;
+}
+
+/** The mutation observer options type */
+export interface UseMutationObserverOptions extends MutationObserverInit {
+  /** The enabled state of the mutation observer */
+  enabled?: boolean;
+}
+
+export type UseResizeObserver = {
+  <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'))
+ */
+export const useMutationObserver = ((...params: any[]) => {
+  const target = (
+    typeof params[0] === 'object' && !('current' in params[0]) ? undefined : params[0]
+  ) as UseMutationObserverTarget | UseMutationObserverTarget[] | undefined;
+  const callback = (target ? params[1] : params[0]) as MutationCallback;
+  const options = (target ? params[2] : params[1]) as UseMutationObserverOptions | undefined;
+
+  const [observer, setObserver] = useState<MutationObserver>();
+  const enabled = options?.enabled ?? true;
+
+  const [internalRef, setInternalRef] = useState<Element>();
+  const internalCallbackRef = useRef<MutationCallback>(callback);
+  internalCallbackRef.current = callback;
+
+  useEffect(() => {
+    if (!enabled && !target && !internalRef) return;
+
+    if (Array.isArray(target)) {
+      if (!target.length) return;
+      const observer = new MutationObserver(internalCallbackRef.current);
+      setObserver(observer);
+      target.forEach((target) => {
+        const element = getElement(target);
+        if (!element) return;
+        observer.observe(element as Element, options);
+      });
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+
+    const element = target ? getElement(target) : internalRef;
+    if (!element) return;
+
+    const observer = new MutationObserver(internalCallbackRef.current);
+    setObserver(observer);
+    observer.observe(element as Element, options);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [internalRef, target, ...Object.values(options ?? {})]);
+
+  const stop = () => observer?.disconnect();
+
+  if (target) return { stop, observer };
+  return {
+    ref: setInternalRef,
+    stop,
+    observer
+  };
+}) as UseResizeObserver;