@codesinger0/shared-components 1.1.12 → 1.1.13

package/dist/index.js

@@ -29,4 +29,5 @@ export { CartProvider, useCart } from './context/CartContext'
 export { default as useScrollLock } from './hooks/useScrollLock'
 
 // Utils
-export { default as ScrollToTop } from './utils/ScrollToTop'
+export { default as ScrollToTop } from './utils/ScrollToTop'
+export { useScrollToAnchor } from './utils/ScrollManager'

package/dist/utils/ScrollManager.jsx

@@ -0,0 +1,85 @@
+import { useCallback } from 'react';
+
+/**
+ * Custom hook for smooth scrolling to anchors
+ * @param {Object} options - Configuration options
+ * @param {string} options.behavior - Scroll behavior ('smooth', 'instant', 'auto')
+ * @param {string} options.block - Vertical alignment ('start', 'center', 'end', 'nearest')
+ * @param {number} options.offset - Additional offset in pixels (useful for fixed headers)
+ * @returns {Function} scrollToAnchor function
+ */
+export const useScrollToAnchor = (options = {}) => {
+  const {
+    behavior = 'smooth',
+    block = 'start',
+    offset = 0
+  } = options;
+
+  const scrollToAnchor = useCallback((anchorId) => {
+    // Remove # if provided
+    const cleanAnchorId = anchorId.replace('#', '');
+    
+    // Find the element
+    const element = document.getElementById(cleanAnchorId);
+    
+    if (!element) {
+      console.warn(`Element with id "${cleanAnchorId}" not found`);
+      return;
+    }
+
+    // If offset is needed, calculate position manually
+    if (offset !== 0) {
+      const elementPosition = element.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: behavior
+      });
+    } else {
+      // Use native scrollIntoView
+      element.scrollIntoView({
+        behavior: behavior,
+        block: block,
+        inline: 'nearest'
+      });
+    }
+  }, [behavior, block, offset]);
+
+  return scrollToAnchor;
+};
+
+// Alternative hook that also handles URL hash updates
+export const useScrollToAnchorWithHash = (options = {}) => {
+  const scrollToAnchor = useScrollToAnchor(options);
+
+  const scrollToAnchorWithHash = useCallback((anchorId) => {
+    const cleanAnchorId = anchorId.replace('#', '');
+    
+    // Update URL hash without triggering page reload
+    history.pushState(null, null, `#${cleanAnchorId}`);
+    
+    // Scroll to the element
+    scrollToAnchor(cleanAnchorId);
+  }, [scrollToAnchor]);
+
+  return scrollToAnchorWithHash;
+};
+
+// Hook that automatically scrolls to hash on page load
+export const useScrollToHashOnLoad = (options = {}) => {
+  const scrollToAnchor = useScrollToAnchor(options);
+
+  React.useEffect(() => {
+    // Check if there's a hash in the URL when component mounts
+    const hash = window.location.hash;
+    if (hash) {
+      // Small delay to ensure page is fully loaded
+      setTimeout(() => {
+        scrollToAnchor(hash);
+      }, 100);
+    }
+  }, [scrollToAnchor]);
+
+  return scrollToAnchor;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [