react-edge-dock 1.0.0 → 1.0.3

package/README.md

@@ -12,6 +12,8 @@ A zero-dependency React + TypeScript library for customizable draggable edge-doc
 - 🎮 Multiple docking modes (free, auto, manual)
 - 💡 Smart popup positioning
 - ⚡ Performance optimized with transform: translate3d
+- 🌐 **SSR compatible (Next.js, Remix, etc.)**
+- 📏 **Configurable edge offset/margin**
 
 ## Installation
 
@@ -29,6 +31,7 @@ function App() {
     <EdgeDock
       dockMode="auto"
       animation={true}
+      edgeOffset={16} // 16px gap from screen edge
       button={<button>🚀</button>}
       popup={<div>Your content here</div>}
     />
@@ -36,6 +39,74 @@ function App() {
 }
 ```
 
+## Usage in Next.js
+
+Works out of the box with Next.js App Router and Pages Router:
+
+```tsx
+'use client'; // For App Router
+
+import { EdgeDock } from 'react-edge-dock';
+
+export default function MyComponent() {
+  return (
+    <EdgeDock
+      dockMode="auto"
+      edgeOffset={20}
+      button={<button>Menu</button>}
+      popup={<div>Navigation</div>}
+    />
+  );
+}
+```
+
+## Configuration
+
+- `dockMode`: `"free"` | `"auto"` | `"manual"` - Docking behavior
+- `dockEdge`: `"left"` | `"right"` | `"top"` | `"bottom"` - Fixed edge (manual mode)
+- `allowedEdges`: `DockEdge[]` - Restrict docking to specific edges (e.g., `['left', 'right']` for horizontal only)
+- `edgeOffset`: `number` - Gap from screen edge in pixels (default: 0)
+- `animation`: `boolean` - Enable snap animations
+- `popupGap`: `number` - Gap between button and popup
+- `position`: `{ x: number; y: number }` - Initial/controlled position
+- `zIndex`: `number` - z-index for the dock
+- `onDockChange`: Callback when dock state changes
+- `isPopupOpen` / `onPopupChange`: Controlled popup state
+
+## Examples
+
+### Restrict to horizontal edges only (left/right)
+
+```tsx
+<EdgeDock
+  dockMode="auto"
+  allowedEdges={['left', 'right']}
+  edgeOffset={16}
+  button={<button>📱</button>}
+/>
+```
+
+### Restrict to vertical edges only (top/bottom)
+
+```tsx
+<EdgeDock
+  dockMode="auto"
+  allowedEdges={['top', 'bottom']}
+  button={<button>⬆️</button>}
+/>
+```
+
+### Manual edge with offset
+
+```tsx
+<EdgeDock
+  dockMode="manual"
+  dockEdge="right"
+  edgeOffset={20}
+  button={<button>➡️</button>}
+/>
+```
+
 ## API
 
 See the [example.tsx](./example.tsx) file for more detailed usage examples.

package/dist/EdgeDock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeDock.d.ts","sourceRoot":"","sources":["../src/EdgeDock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAkF5C"}
+{"version":3,"file":"EdgeDock.d.ts","sourceRoot":"","sources":["../src/EdgeDock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAsF5C"}

package/dist/EdgeDock.js

@@ -14,13 +14,15 @@ import { useEdgeDock } from './useEdgeDock';
  * ```
  */
 export function EdgeDock(props) {
-    const { button, popup, className, style, dockMode, dockEdge, position, animation, popupGap, zIndex, onDockChange, isPopupOpen, onPopupChange, } = props;
+    const { button, popup, className, style, dockMode, dockEdge, allowedEdges, position, animation, popupGap, edgeOffset, zIndex, onDockChange, isPopupOpen, onPopupChange, } = props;
     const { state, buttonRef, popupRef, closePopup, buttonStyles, popupStyles, buttonProps, } = useEdgeDock({
         dockMode,
         dockEdge,
+        allowedEdges,
         position,
         animation,
         popupGap,
+        edgeOffset,
         zIndex,
         onDockChange,
         isPopupOpen,

package/dist/types.d.ts

@@ -35,12 +35,16 @@ export interface EdgeDockConfig {
     dockMode?: DockMode;
     /** Fixed edge for manual dock mode */
     dockEdge?: DockEdge;
+    /** Restrict which edges are allowed for docking (only works in auto mode) */
+    allowedEdges?: DockEdge[];
     /** Initial or controlled position */
     position?: Position;
     /** Enable snap animations */
     animation?: boolean;
     /** Gap between button and popup in pixels */
     popupGap?: number;
+    /** Offset from edge when docked (in pixels) */
+    edgeOffset?: number;
     /** z-index for the dock container */
     zIndex?: number;
     /** Callback when dock state changes */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/useEdgeDock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAGlB,MAAM,SAAS,CAAC;AA4IjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAiT1E"}
+{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAGlB,MAAM,SAAS,CAAC;AAwKjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAgV1E"}

package/dist/useEdgeDock.js

@@ -1,47 +1,66 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
+/**
+ * Check if code is running in browser (SSR-safe)
+ */
+const isBrowser = typeof window !== 'undefined';
+/**
+ * Get viewport dimensions safely (SSR-compatible)
+ */
+function getViewport() {
+    if (!isBrowser) {
+        return { width: 1920, height: 1080 }; // Default fallback for SSR
+    }
+    return { width: window.innerWidth, height: window.innerHeight };
+}
 /**
  * Calculate which edge is closest to the given position
  */
-function getClosestEdge(pos, viewport) {
+function getClosestEdge(pos, viewport, allowedEdges) {
     const distanceToLeft = pos.x;
     const distanceToRight = viewport.width - pos.x;
     const distanceToTop = pos.y;
     const distanceToBottom = viewport.height - pos.y;
-    const minDistance = Math.min(distanceToLeft, distanceToRight, distanceToTop, distanceToBottom);
-    if (minDistance === distanceToLeft)
-        return 'left';
-    if (minDistance === distanceToRight)
-        return 'right';
-    if (minDistance === distanceToTop)
-        return 'top';
-    return 'bottom';
+    // Create map of edges with their distances
+    const edgeDistances = [
+        { edge: 'left', distance: distanceToLeft },
+        { edge: 'right', distance: distanceToRight },
+        { edge: 'top', distance: distanceToTop },
+        { edge: 'bottom', distance: distanceToBottom },
+    ];
+    // Filter by allowed edges if specified
+    const validEdges = allowedEdges
+        ? edgeDistances.filter(({ edge }) => allowedEdges.includes(edge))
+        : edgeDistances;
+    // Find the closest edge
+    const closest = validEdges.reduce((min, current) => current.distance < min.distance ? current : min);
+    return closest.edge;
 }
 /**
  * Snap position to edge based on dock mode
  */
-function snapToEdge(pos, edge, viewport, buttonDimensions) {
+function snapToEdge(pos, edge, viewport, buttonDimensions, offset = 0) {
     const halfWidth = buttonDimensions.width / 2;
     const halfHeight = buttonDimensions.height / 2;
     switch (edge) {
         case 'left':
             return {
-                x: halfWidth,
+                x: halfWidth + offset,
                 y: Math.max(halfHeight, Math.min(viewport.height - halfHeight, pos.y)),
             };
         case 'right':
             return {
-                x: viewport.width - halfWidth,
+                x: viewport.width - halfWidth - offset,
                 y: Math.max(halfHeight, Math.min(viewport.height - halfHeight, pos.y)),
             };
         case 'top':
             return {
                 x: Math.max(halfWidth, Math.min(viewport.width - halfWidth, pos.x)),
-                y: halfHeight,
+                y: halfHeight + offset,
             };
         case 'bottom':
             return {
                 x: Math.max(halfWidth, Math.min(viewport.width - halfWidth, pos.x)),
-                y: viewport.height - halfHeight,
+                y: viewport.height - halfHeight - offset,
             };
     }
 }
@@ -109,11 +128,13 @@ function calculatePopupPosition(buttonPos, buttonDimensions, popupDimensions, vi
  * Main hook for edge dock functionality
  */
 export function useEdgeDock(config = {}) {
-    const { dockMode = 'auto', dockEdge, position: controlledPosition, animation = true, popupGap = 12, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, } = config;
+    const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset = 0, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, } = config;
     const buttonRef = useRef(null);
     const popupRef = useRef(null);
-    // Internal state
-    const [position, setPositionInternal] = useState(controlledPosition || { x: window.innerWidth - 60, y: window.innerHeight - 60 });
+    const isMountedRef = useRef(false);
+    // Use a fixed initial position to avoid SSR hydration mismatch
+    // This will be updated after mount on the client
+    const [position, setPositionInternal] = useState(controlledPosition || { x: 100, y: 100 });
     const [dockedEdge, setDockedEdge] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
     const [isPopupOpenInternal, setIsPopupOpenInternal] = useState(false);
@@ -137,6 +158,28 @@ export function useEdgeDock(config = {}) {
         isDragging,
         isPopupOpen,
     };
+    // Initialize position after mount (client-side only) to avoid hydration mismatch
+    useEffect(() => {
+        if (!isMountedRef.current && !controlledPosition && buttonRef.current) {
+            isMountedRef.current = true;
+            const viewport = getViewport();
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
+            // Set initial position on client after mount
+            let initialPos = { x: viewport.width - 60, y: viewport.height - 60 };
+            initialPos = constrainToViewport(initialPos, viewport, buttonDimensions);
+            if (dockMode === 'auto') {
+                const edge = getClosestEdge(initialPos, viewport, allowedEdges);
+                initialPos = snapToEdge(initialPos, edge, viewport, buttonDimensions, edgeOffset);
+                setDockedEdge(edge);
+            }
+            else if (dockMode === 'manual' && dockEdge) {
+                initialPos = snapToEdge(initialPos, dockEdge, viewport, buttonDimensions, edgeOffset);
+                setDockedEdge(dockEdge);
+            }
+            setPositionInternal(initialPos);
+        }
+    }, [controlledPosition, dockMode, dockEdge, allowedEdges, edgeOffset]);
     // Update controlled position
     useEffect(() => {
         if (controlledPosition) {
@@ -148,7 +191,7 @@ export function useEdgeDock(config = {}) {
         if (isPopupOpen && buttonRef.current && popupRef.current) {
             const buttonRect = buttonRef.current.getBoundingClientRect();
             const popupRect = popupRef.current.getBoundingClientRect();
-            const result = calculatePopupPosition(position, { width: buttonRect.width, height: buttonRect.height }, { width: popupRect.width, height: popupRect.height }, { width: window.innerWidth, height: window.innerHeight }, popupGap);
+            const result = calculatePopupPosition(position, { width: buttonRect.width, height: buttonRect.height }, { width: popupRect.width, height: popupRect.height }, getViewport(), popupGap);
             setPopupPosition(result.position);
             setPopupOrigin(result.origin);
         }
@@ -164,23 +207,23 @@ export function useEdgeDock(config = {}) {
         if (!buttonRef.current)
             return;
         const buttonRect = buttonRef.current.getBoundingClientRect();
-        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const viewport = getViewport();
         const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
         let finalPos = constrainToViewport(newPos, viewport, buttonDimensions);
         if (dockMode === 'auto') {
-            const edge = getClosestEdge(finalPos, viewport);
-            finalPos = snapToEdge(finalPos, edge, viewport, buttonDimensions);
+            const edge = getClosestEdge(finalPos, viewport, allowedEdges);
+            finalPos = snapToEdge(finalPos, edge, viewport, buttonDimensions, edgeOffset);
             setDockedEdge(edge);
         }
         else if (dockMode === 'manual' && dockEdge) {
-            finalPos = snapToEdge(finalPos, dockEdge, viewport, buttonDimensions);
+            finalPos = snapToEdge(finalPos, dockEdge, viewport, buttonDimensions, edgeOffset);
             setDockedEdge(dockEdge);
         }
         else {
             setDockedEdge(null);
         }
         setPositionInternal(finalPos);
-    }, [dockMode, dockEdge]);
+    }, [dockMode, dockEdge, allowedEdges, edgeOffset]);
     // Toggle popup
     const togglePopup = useCallback(() => {
         const newState = !isPopupOpen;
@@ -258,16 +301,16 @@ export function useEdgeDock(config = {}) {
             // Snap to edge if needed
             if (buttonRef.current) {
                 const buttonRect = buttonRef.current.getBoundingClientRect();
-                const viewport = { width: window.innerWidth, height: window.innerHeight };
+                const viewport = getViewport();
                 const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
                 let finalPos = position;
                 if (dockMode === 'auto') {
-                    const edge = getClosestEdge(position, viewport);
-                    finalPos = snapToEdge(position, edge, viewport, buttonDimensions);
+                    const edge = getClosestEdge(position, viewport, allowedEdges);
+                    finalPos = snapToEdge(position, edge, viewport, buttonDimensions, edgeOffset);
                     setDockedEdge(edge);
                 }
                 else if (dockMode === 'manual' && dockEdge) {
-                    finalPos = snapToEdge(position, dockEdge, viewport, buttonDimensions);
+                    finalPos = snapToEdge(position, dockEdge, viewport, buttonDimensions, edgeOffset);
                     setDockedEdge(dockEdge);
                 }
                 setPositionInternal(finalPos);
@@ -279,7 +322,7 @@ export function useEdgeDock(config = {}) {
             document.removeEventListener('pointermove', handlePointerMove);
             document.removeEventListener('pointerup', handlePointerUp);
         };
-    }, [position, dockMode, dockEdge, animation]);
+    }, [position, dockMode, dockEdge, animation, edgeOffset, allowedEdges]);
     // Click handler (only trigger if not dragged)
     const handleClick = useCallback((e) => {
         if (dragStateRef.current.hasMoved) {
@@ -291,26 +334,28 @@ export function useEdgeDock(config = {}) {
     }, [togglePopup]);
     // Handle window resize
     useEffect(() => {
+        if (!isBrowser)
+            return;
         const handleResize = () => {
             if (buttonRef.current) {
                 const buttonRect = buttonRef.current.getBoundingClientRect();
-                const viewport = { width: window.innerWidth, height: window.innerHeight };
+                const viewport = getViewport();
                 const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
                 let newPos = constrainToViewport(position, viewport, buttonDimensions);
                 if (dockMode === 'auto') {
-                    const edge = getClosestEdge(newPos, viewport);
-                    newPos = snapToEdge(newPos, edge, viewport, buttonDimensions);
+                    const edge = getClosestEdge(newPos, viewport, allowedEdges);
+                    newPos = snapToEdge(newPos, edge, viewport, buttonDimensions, edgeOffset);
                     setDockedEdge(edge);
                 }
                 else if (dockMode === 'manual' && dockEdge) {
-                    newPos = snapToEdge(newPos, dockEdge, viewport, buttonDimensions);
+                    newPos = snapToEdge(newPos, dockEdge, viewport, buttonDimensions, edgeOffset);
                 }
                 setPositionInternal(newPos);
             }
         };
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
-    }, [position, dockMode, dockEdge]);
+    }, [position, dockMode, dockEdge, edgeOffset, allowedEdges]);
     // Button styles
     const buttonStyles = {
         position: 'fixed',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edge-dock",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A zero-dependency React TypeScript library for customizable draggable edge-docked floating buttons with popup support",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",