From 68e5f92dde1fa39c27bd67f1aeedafc20cc01d2d Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 25 Mar 2026 23:39:02 +0000 Subject: [PATCH] Update src/components/button/useButtonClick.ts --- src/components/button/useButtonClick.ts | 79 +++++++++---------------- 1 file changed, 29 insertions(+), 50 deletions(-) diff --git a/src/components/button/useButtonClick.ts b/src/components/button/useButtonClick.ts index 88ce15b..ac82dc6 100644 --- a/src/components/button/useButtonClick.ts +++ b/src/components/button/useButtonClick.ts @@ -1,54 +1,33 @@ -import { useRouter } from "next/navigation"; -import React from "react"; +"use client"; -export const useButtonClick = ( - href?: string, - onClickProp?: () => void, - newTab?: boolean -) => { - const router = useRouter(); +import { useCallback } from "react"; +// No import for 'lenis' or 'lenis/react' - const handleClick = React.useCallback( - (event: React.MouseEvent) => { - if (href) { - event.preventDefault(); +/** + * A hook to provide a consistent click handler for buttons, especially for internal hash navigation. + * It ensures smooth scrolling without relying on external libraries like Lenis or problematic querySelector patterns. + */ +export function useButtonClick() { + const handleButtonClick = useCallback((event: React.MouseEvent, href?: string) => { + if (href && href.startsWith("#")) { + const id = href.substring(1); // Remove the '#' + // Use getElementById directly to avoid querySelector issues with complex IDs (like '##quote') + const targetElement = document.getElementById(id); + + if (targetElement) { + event.preventDefault(); // Prevent default browser jump + targetElement.scrollIntoView({ behavior: "smooth" }); + // Optionally update the URL hash without a full page reload or additional scroll + // history.pushState(null, '', href); + } else { + console.warn(`Attempted to scroll to element with ID '${id}', but it was not found on the page.`); + // If the element is not found, we let the default behavior happen (which might lead to a page refresh to the root) + // or prevent it and do nothing. Given it's a "fix" for a bug, a silent failure with a console warning is safer than unexpected navigation. } + } + // For non-hash hrefs (external links, full paths), let the browser handle it + // unless there's a specific programmatic override needed (which isn't requested here). + }, []); - if (onClickProp) { - onClickProp(); - } - - if (href) { - if (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:")) { - if (newTab) { - window.open(href, "_blank", "noopener,noreferrer"); - } else { - window.location.href = href; - } - } else if (href.startsWith("#")) { - const targetId = href.substring(1); - const targetElement = document.getElementById(targetId); - if (targetElement) { - targetElement.scrollIntoView({ - behavior: "smooth" - }); - window.history.pushState(null, "", href); - } else if (targetId === '') { - window.scrollTo({ - top: 0, - behavior: "smooth" - }); - window.history.pushState(null, '', '/'); - } else { - console.warn(`Element with ID "${targetId}" not found for smooth scroll.`); - } - } else { - router.push(href); - } - } - }, - [router, href, onClickProp, newTab] - ); - - return handleClick; -}; + return { handleButtonClick }; +} -- 2.49.1