fixes #329: Add multi-format clipboard support to useCopyToClipboard

Author: abhichaurasiya2022

index.d.ts

@@ -116,6 +116,12 @@ export type SpeechState = {
   volume: number;
 };
 
+export type ClipboardFormats = {
+  plain?: string;
+  html?: string;
+  markdown?: string;
+};
+
 declare module "@uidotdev/usehooks" {
   export function useBattery(): BatteryManager;
 
@@ -125,7 +131,7 @@ declare module "@uidotdev/usehooks" {
 
   export function useCopyToClipboard(): [
     string | null,
-    (value: string) => Promise<void>
+    (value: string | ClipboardFormats) => void
   ];
 
   export function useCounter(

index.js

@@ -145,18 +145,32 @@ export function useCopyToClipboard() {
   const copyToClipboard = React.useCallback((value) => {
     const handleCopy = async () => {
       try {
-        if (navigator?.clipboard?.writeText) {
+        // ClipboardItem API for multiple formats
+        if (typeof value === 'object' && value !== null && window.ClipboardItem) {
+          const items = {};
+          if (value.plain) {
+            items["text/plain"] = new Blob([value.plain], { type: "text/plain" });
+          }
+          if (value.html) {
+            items["text/html"] = new Blob([value.html], { type: "text/html" });
+          }
+          if (value.markdown) {
+            items["text/markdown"] = new Blob([value.markdown], { type: "text/markdown" });
+          }
+          const clipboardItem = new ClipboardItem(items);
+          await navigator.clipboard.write([clipboardItem]);
+          setState(value.plain || value.html || value.markdown);
+        } else if (navigator?.clipboard?.writeText) {
           await navigator.clipboard.writeText(value);
           setState(value);
         } else {
           throw new Error("writeText not supported");
         }
       } catch (e) {
-        oldSchoolCopy(value);
-        setState(value);
+        oldSchoolCopy(typeof value === 'object' ? value.plain : value);
+        setState(typeof value === 'object' ? value.plain : value);
       }
     };
-
     handleCopy();
   }, []);
 
@@ -653,10 +667,27 @@ export function useLocalStorage(key, initialValue) {
 
 export function useLockBodyScroll() {
   React.useLayoutEffect(() => {
-    const originalStyle = window.getComputedStyle(document.body).overflow;
+    // Preserve the current scroll position
+    const scrollY = window.scrollY || window.pageYOffset;
+
+    // Save original inline styles so we can restore them
+    const originalOverflow = window.getComputedStyle(document.body).overflow;
+    const originalPosition = document.body.style.position;
+    const originalTop = document.body.style.top;
+
+    // Lock the body scroll by fixing position and offsetting by the scroll
     document.body.style.overflow = "hidden";
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+
     return () => {
-      document.body.style.overflow = originalStyle;
+      // Restore original inline styles
+      document.body.style.position = originalPosition;
+      document.body.style.top = originalTop;
+      document.body.style.overflow = originalOverflow;
+
+      // Restore the scroll position
+      window.scrollTo(0, scrollY);
     };
   }, []);
 }

usehooks.com/src/content/hooks/useLockBodyScroll.mdx

@@ -13,13 +13,15 @@ import HookDescription from "../../components/HookDescription.astro";
 import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
 
 <HookDescription name={frontmatter.name}>
-  The useLockBodyScroll hook temporarily disables scrolling on the document
-  body. This can be beneficial in scenarios where you want to restrict scrolling
-  while displaying a modal, a dropdown menu, or any other component that
-  requires the user’s focus. Once the component using this hook is unmounted or
-  no longer needed, the hook returns a cleanup function that restores the
-  original overflow style, ensuring that the scroll behavior is reverted to its
-  previous state.
+  The `useLockBodyScroll` hook temporarily disables scrolling on the document
+  body. Instead of only toggling the `overflow` style (which can sometimes
+  cause the viewport to jump to the top on some browsers/layouts), this hook
+  preserves the user's current scroll position and locks the page by applying
+  a fixed position and an offset. When the hook cleans up it restores the
+  original body styles and returns the user to the exact same scroll position.
+
+  This is useful when showing modals, dropdowns, or any UI that should keep
+  focus without changing the page scroll.
 </HookDescription>
 
 <CodePreview
@@ -83,3 +85,15 @@ export default function App() {
 ```
 
 </StaticCodeContainer>
+
+### Notes
+
+- This implementation preserves the scroll position by setting `position: fixed` and
+  `top: -<scrollY>px` on the `body`, then restoring the original styles and
+  calling `window.scrollTo(0, scrollY)` on cleanup.
+- If your app can open nested modals or multiple components that call
+  `useLockBodyScroll` at the same time, consider a reference-counted lock so the
+  body styles are only restored when the last lock is released.
+- For advanced use cases or mobile-specific edge cases, you may prefer a
+  battle-tested library such as `body-scroll-lock` or `disable-scroll`.
+