main 🧊 add callback for use hash

Author: debabin

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

@@ -1,33 +1,62 @@
-import { useEffect, useState } from 'react';
-const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));
+import { useEffect, useRef, useState } from 'react';
+export const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));
 /**
  * @name useHash
  * @description - Hook that manages the hash value
  * @category State
  * @usage low
  *
+ * @overload
  * @param {string} [initialValue] The initial hash value if no hash exists
+ * @param {UseHashOptions} [options] Configuration options
+ * @param {boolean} [options.enabled] The enabled state of the hook
+ * @param {'initial' | 'replace'} [options.mode] The mode of hash setting
+ * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash("initial");
+ * const [hash, setHash] = useHash("initial", {
+ *   enabled: true,
+ *   mode: "replace",
+ *   onChange: (newHash) => console.log('Hash changed:', newHash)
+ * });
+ *
+ * @overload
+ * @param {string} [initialValue] The initial hash value if no hash exists
+ * @param {(hash: string) => void} [callback] Callback function called when hash changes
+ * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
+ *
+ * @example
+ * const [hash, setHash] = useHash("initial", (newHash) => console.log('Hash changed:', newHash));
  */
-export const useHash = (initialValue = '', mode = 'replace') => {
+export const useHash = (...params) => {
+  const [initialValue = '', param] = params;
+  const options = typeof param === 'function' ? { onChange: param } : param;
+  const enabled = options?.enabled ?? true;
+  const mode = options?.mode ?? 'replace';
   const [hash, setHash] = useState(() => {
     if (typeof window === 'undefined') return initialValue;
     return getHash() || initialValue;
   });
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
   const set = (value) => {
     window.location.hash = value;
     setHash(value);
+    optionsRef.current?.onChange?.(value);
   };
   useEffect(() => {
+    if (!enabled) return;
     if (mode === 'replace') window.location.hash = hash;
-    const onHashChange = () => setHash(getHash());
+    const onHashChange = () => {
+      const newHash = getHash();
+      setHash(newHash);
+      optionsRef.current?.onChange?.(newHash);
+    };
     window.addEventListener('hashchange', onHashChange);
     return () => {
       window.removeEventListener('hashchange', onHashChange);
     };
-  }, []);
+  }, [enabled, mode]);
   return [hash, set];
 };

packages/core/src/hooks/useHash/useHash.test.ts

@@ -56,10 +56,10 @@ it('Should decode hash', () => {
 
   const [_, set] = result.current;
 
-  act(() => set('test value'));
+  act(() => set('testvalue'));
 
-  expect(window.location.hash).toBe('#test%20value');
-  expect(result.current[0]).toBe('test value');
+  expect(window.location.hash).toBe('#testvalue');
+  expect(result.current[0]).toBe('testvalue');
 });
 
 it('Should use initial value', () => {
@@ -72,12 +72,71 @@ it('Should use initial value', () => {
 it('Should prefer existing hash over initial value', () => {
   window.location.hash = '#existing';
 
-  const { result } = renderHook(() => useHash('initial', 'initial'));
+  const { result } = renderHook(() => useHash('initial', { mode: 'initial' }));
 
   expect(window.location.hash).toBe('#existing');
   expect(result.current[0]).toBe('existing');
 });
 
+it('Should call onChange callback when hash changes programmatically', () => {
+  const callback = vi.fn();
+  const { result } = renderHook(() => useHash('initial', callback));
+
+  const [_, set] = result.current;
+
+  act(() => set('testvalue'));
+
+  expect(callback).toHaveBeenCalledWith('testvalue');
+  expect(callback).toHaveBeenCalledTimes(1);
+});
+
+it('Should call onChange callback when hash changes externally', () => {
+  const callback = vi.fn();
+  renderHook(() => useHash('initial', callback));
+
+  act(() => {
+    window.location.hash = '#external-hash';
+    window.dispatchEvent(new Event('hashchange'));
+  });
+
+  expect(callback).toHaveBeenCalledWith('external-hash');
+});
+
+it('Should work with options object', () => {
+  const onChange = vi.fn();
+  const { result } = renderHook(() =>
+    useHash('initial', {
+      onChange
+    })
+  );
+
+  const [_, set] = result.current;
+
+  expect(result.current[0]).toBe('initial');
+
+  act(() => set('testvalue'));
+
+  expect(onChange).toHaveBeenCalledWith('testvalue');
+  expect(result.current[0]).toBe('testvalue');
+});
+
+it('Should not work when disabled', () => {
+  const { result } = renderHook(() =>
+    useHash('initial', {
+      enabled: false
+    })
+  );
+
+  expect(result.current[0]).toBe('initial');
+
+  act(() => {
+    window.location.hash = '#external-hash';
+    window.dispatchEvent(new Event('hashchange'));
+  });
+
+  expect(result.current[0]).toBe('initial');
+});
+
 it('Should clean up on unmount', () => {
   const { unmount } = renderHook(useHash);
   const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');

packages/core/src/hooks/useHash/useHash.ts

@@ -1,45 +1,95 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));
+export const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));
+
+/** The use hash options type */
+export interface UseHashOptions {
+  /** The enabled state of the hook */
+  enabled?: boolean;
+  /** The mode of hash setting */
+  mode?: 'initial' | 'replace';
+  /** Callback function called when hash changes */
+  onChange?: (hash: string) => void;
+}
 
 /** The use hash return type */
 type UseHashReturn = [string, (value: string) => void];
 
+export interface UseHash {
+  (initialValue?: string, options?: UseHashOptions): UseHashReturn;
+
+  (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;
+}
+
 /**
  * @name useHash
  * @description - Hook that manages the hash value
  * @category State
  * @usage low
  *
+ * @overload
+ * @param {string} [initialValue] The initial hash value if no hash exists
+ * @param {UseHashOptions} [options] Configuration options
+ * @param {boolean} [options.enabled] The enabled state of the hook
+ * @param {'initial' | 'replace'} [options.mode] The mode of hash setting
+ * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes
+ * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
+ *
+ * @example
+ * const [hash, setHash] = useHash("initial", {
+ *   enabled: true,
+ *   mode: "replace",
+ *   onChange: (newHash) => console.log('Hash changed:', newHash)
+ * });
+ *
+ * @overload
  * @param {string} [initialValue] The initial hash value if no hash exists
+ * @param {(hash: string) => void} [callback] Callback function called when hash changes
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash("initial");
+ * const [hash, setHash] = useHash("initial", (newHash) => console.log('Hash changed:', newHash));
  */
-export const useHash = (
-  initialValue = '',
-  mode: 'initial' | 'replace' = 'replace'
-): UseHashReturn => {
+export const useHash = ((...params: any[]) => {
+  const [initialValue = '', param] = params;
+
+  const options = (typeof param === 'function' ? { onChange: param } : param) as
+    | UseHashOptions
+    | undefined;
+
+  const enabled = options?.enabled ?? true;
+  const mode = options?.mode ?? 'replace';
+
   const [hash, setHash] = useState(() => {
     if (typeof window === 'undefined') return initialValue;
     return getHash() || initialValue;
   });
 
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
   const set = (value: string) => {
     window.location.hash = value;
     setHash(value);
+    optionsRef.current?.onChange?.(value);
   };
 
   useEffect(() => {
+    if (!enabled) return;
+
     if (mode === 'replace') window.location.hash = hash;
 
-    const onHashChange = () => setHash(getHash());
+    const onHashChange = () => {
+      const newHash = getHash();
+      setHash(newHash);
+      optionsRef.current?.onChange?.(newHash);
+    };
+
     window.addEventListener('hashchange', onHashChange);
     return () => {
       window.removeEventListener('hashchange', onHashChange);
     };
-  }, []);
+  }, [enabled, mode]);
 
   return [hash, set] as const;
-};
+}) as UseHash;