✨ [Feature] :added new hooks useHash, useHashHistory, useClipboard and useOrigin

packages/usehooks-ts/src/index.ts

@@ -39,3 +39,7 @@ export * from './useToggle'
 export * from './useUnmount'
 export * from './useUpdateEffect'
 export * from './useWindowSize'
+export * from './useClipboard'
+export * from './useHash'
+export * from './useOrigin'
+export * from './useHashHistory'

packages/usehooks-ts/src/useClipboard/index.ts

@@ -0,0 +1 @@
+export * from './useClipboard'

packages/usehooks-ts/src/useClipboard/useClipboard.demo.tsx

@@ -0,0 +1,25 @@
+import { useClipboard } from './useClipboard'
+
+// mock message
+const message = {
+  content: 'I am comming from openAi response',
+}
+
+export default function CopyToClipboard({ ...props }) {
+  const { isCopied, copyToClipboard } = useClipboard({ timeout: 1000 })
+
+  return (
+    <div {...props}>
+      <button
+        className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center"
+        onClick={() => copyToClipboard(message.content)}
+      >
+        {isCopied ? (
+          <span className="text-green-500">Copied</span>
+        ) : (
+          <span className="text-gray-600">Copy</span>
+        )}
+      </button>
+    </div>
+  )
+}

packages/usehooks-ts/src/useClipboard/useClipboard.md

@@ -0,0 +1 @@
+The useClipboard hook is a custom React hook that facilitates copying text to the clipboard with optional timeout functionality.

packages/usehooks-ts/src/useClipboard/useClipboard.test.ts

@@ -0,0 +1,23 @@
+import { act, renderHook } from '@testing-library/react';
+import { useClipboard } from './useClipboard';
+
+
+describe('useClipboard()', () => {
+  it('should copy value to clipboard and reset isCopied state after timeout', async () => {
+    const { result } = renderHook(() => useClipboard({ timeout: 2000 }));
+
+    act(() => {
+      result.current.copyToClipboard('test value');
+    });
+
+    // The isCopied state should be true immediately after copying
+    expect(result.current.isCopied).toBe(true);
+
+    // Fast-forward time by 2000 milliseconds
+    await new Promise(resolve => setTimeout(resolve, 2000));
+
+    // The isCopied state should be reset to false after the timeout
+    expect(result.current.isCopied).toBe(false);
+  });
+});
+

packages/usehooks-ts/src/useClipboard/useClipboard.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+export function useClipboard({ timeout = 2000 }: { timeout?: number }) {
+  const [isCopied, setIsCopied] = useState<Boolean>(false)
+
+  const copyToClipboard = (value: string) => {
+    if (!value) return
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) return
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+
+      setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+    })
+  }
+
+  return { isCopied, copyToClipboard }
+}

packages/usehooks-ts/src/useHash/index.ts

@@ -0,0 +1 @@
+export * from './useHash'

packages/usehooks-ts/src/useHash/useHash.demo.tsx

@@ -0,0 +1,14 @@
+import { useHash } from './useHash'
+
+function Component() {
+  const hash = useHash();
+
+  return (
+    <div>
+      <h1>Hash String: {hash} </h1>
+      {/* Your component JSX */}
+    </div>
+  );
+}
+
+export default Component;

packages/usehooks-ts/src/useHash/useHash.md

@@ -0,0 +1,3 @@
+We use the useHash hook to read the entire hash string from the URL.
+
+- [`useHashHistory`](/react-hook/use-hash-history): The useHashHistory hook is used to track changes in the URL hash over time. It returns an array containing the history of hash values, starting from the initial value when the component mounts.

packages/usehooks-ts/src/useHash/useHash.test.ts

@@ -0,0 +1,21 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useHash } from './useHash';
+
+
+describe('useHash()', () => {
+  it('should update hash value on hashchange event', () => {
+    const { result } = renderHook(() => useHash());
+
+    // Simulate a hashchange event with a new hash value
+    const newHash = "newHashValue";
+    act(() => {
+      window.location.hash = `#${newHash}`;
+      const event = new Event('hashchange');
+      window.dispatchEvent(event);
+    });
+
+    // Check if the hash value has been updated
+    expect(result.current).toBe(newHash);
+  });
+});

packages/usehooks-ts/src/useHash/useHash.ts

@@ -0,0 +1,21 @@
+import { useState,useEffect } from 'react';
+
+
+export function useHash() {
+    const [hash, setHash] = useState<string>("");
+
+    useEffect(() => {
+      const handleHashChange = () => {
+        setHash(window.location.hash.slice(1));
+      };
+      handleHashChange();
+
+      window.addEventListener("hashchange", handleHashChange);
+
+      return () => {
+        window.removeEventListener("hashchange", handleHashChange);
+      };
+    }, []);
+
+    return hash;
+  }

packages/usehooks-ts/src/useHashHistory/index.ts

@@ -0,0 +1 @@
+export * from './useHashHistory'

packages/usehooks-ts/src/useHashHistory/useHashHistory.demo.tsx

@@ -0,0 +1,20 @@
+
+import { useHashHistory } from "./useHashHistory";
+
+
+function Component() {
+  const hashHistory = useHashHistory();
+
+  return (
+    <div>
+      <h1>Hash History:</h1>
+      <ul>
+        {hashHistory.map((hash, index) => (
+          <li key={index}>{hash}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Component;

packages/usehooks-ts/src/useHashHistory/useHashHistory.md

@@ -0,0 +1,5 @@
+The useHashHistory hook is used to track changes in the URL hash over time. It returns an array containing the history of hash values, starting from the initial value when the component mounts. You can display this history in your component to show how the hash has changed during the user's interaction with the page.
+
+### Related hooks
+
+- [`useHash`](/react-hook/use-hash): We use the useHash hook to read the entire hash string from the URL.

packages/usehooks-ts/src/useHashHistory/useHashHistory.test.ts

@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react';
+import { useHashHistory } from './useHashHistory';
+
+describe('useHashHistory()', () => {
+  let originalHash: string;
+  let originalRemoveEventListener: any;
+
+  beforeEach(() => {
+    originalHash = window.location.hash;
+    originalRemoveEventListener = window.removeEventListener;
+
+  });
+
+  afterEach(() => {
+    window.location.hash = originalHash;
+    window.removeEventListener = originalRemoveEventListener; // Restore removeEventListener
+  });
+
+  it('should initialize with the current hash', () => {
+    const { result } = renderHook(() => useHashHistory());
+
+    expect(result.current).toEqual([originalHash]);
+  });
+
+  it('should update history array when hash changes', () => {
+    const { result } = renderHook(() => useHashHistory());
+
+    // Simulate a hashchange event with a new hash value
+    const newHash = "#newHash";
+    window.location.hash = newHash;
+    const event = new Event('hashchange');
+    window.dispatchEvent(event);
+
+    expect(result.current).toEqual([originalHash, newHash]);
+  });
+
+  it('should remove event listener on unmount', () => {
+    const { unmount } = renderHook(() => useHashHistory());
+    unmount();
+
+    expect(window.removeEventListener).toHaveBeenCalledWith('hashchange', expect.any(Function));
+  });
+});

packages/usehooks-ts/src/useHashHistory/useHashHistory.ts

@@ -0,0 +1,20 @@
+import { useState,useEffect } from 'react';
+
+// Hook to track hash history
+export function useHashHistory(): string[] {
+    const [history, setHistory] = useState<string[]>([window.location.hash]);
+
+    useEffect(() => {
+      const handleHashChange = () => {
+        setHistory((prevHistory) => [...prevHistory, window.location.hash]);
+      };
+
+      window.addEventListener("hashchange", handleHashChange);
+
+      return () => {
+        window.removeEventListener("hashchange", handleHashChange);
+      };
+    }, []);
+
+    return history;
+  }

packages/usehooks-ts/src/useOrigin/index.ts

@@ -0,0 +1 @@
+export * from './useOrigin'

packages/usehooks-ts/src/useOrigin/useOrigin.demo.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { useOrigin } from './useOrigin'
+
+interface LiveClockProps {}
+
+interface Time {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+function formatTime(date: Date): Time {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  return { hours, minutes, seconds };
+}
+
+function LiveClock(props: LiveClockProps) {
+  const origin = useOrigin();
+  const [currentTime, setCurrentTime] = useState<Date>(new Date());
+
+  useEffect(() => {
+    const updateCurrentTime = () => {
+      setCurrentTime(new Date());
+    };
+
+    // Update the current time every second
+    const intervalId = setInterval(updateCurrentTime, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []); // Run the effect only once on component mount
+
+  const { hours, minutes, seconds } = formatTime(currentTime);
+
+  return (
+    <div className="bg-gray-100 p-8 rounded-md shadow-md">
+      <h2 className="text-2xl font-bold mb-4">Live Clock</h2>
+      <p className="text-gray-600 mb-2">Current Origin: {origin}</p>
+      <p className="text-3xl font-bold text-blue-600">
+        Current Time: {`${hours}:${minutes}:${seconds}`}
+      </p>
+    </div>
+  );
+}
+
+export default LiveClock;

packages/usehooks-ts/src/useOrigin/useOrigin.md

@@ -0,0 +1 @@
+The useCurrentOrigin hook is a custom React hook designed to provide the origin (protocol, hostname, and port) of the current window location. This can be particularly useful in scenarios where real-time information is needed based on the user's context.

packages/usehooks-ts/src/useOrigin/useOrigin.test.ts

@@ -0,0 +1,43 @@
+import { act, renderHook } from '@testing-library/react';
+import { useOrigin } from './useOrigin';
+
+describe('useOrigin()', () => {
+  it('should return empty string if window.location.origin is not available', () => {
+    const originalLocation = window.location;
+    delete (window as any).location;
+    window.location = { origin: '' }as unknown as Location;
+
+    const { result } = renderHook(() => useOrigin());
+
+    expect(result.current).toBe('');
+
+    window.location = originalLocation;
+  });
+
+  it('should return empty string before component has mounted', () => {
+    const { result } = renderHook(() => useOrigin());
+
+    expect(result.current).toBe('');
+  });
+
+  it('should return window.location.origin after component has mounted', async () => {
+    const originalLocation = window.location;
+    delete (window as any).location;
+    window.location = { origin: 'https://usehooks-ts.com' } as unknown as Location;
+
+    let result: any;
+    await act(async () => {
+      result = renderHook(() => useOrigin()).result;
+    });
+
+    expect(result.current).toBe('');
+
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0)); // Waiting for the next microtask
+    });
+
+    expect(result.current).toBe('https://usehooks-ts.com');
+
+    window.location = originalLocation;
+  });
+});

packages/usehooks-ts/src/useOrigin/useOrigin.ts

@@ -0,0 +1,18 @@
+import { useState ,useEffect} from 'react';
+
+
+export const useOrigin = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+  if (!mounted) {
+    return "";
+  }
+
+  return origin;
+}