react-edge-dock 1.0.2 → 1.0.4

package/README.md

@@ -65,7 +65,7 @@ export default function MyComponent() {
 - `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)
+- `edgeOffset`: `number | { left?: number; right?: number; top?: number; bottom?: number }` - Gap from edges in pixels
 - `animation`: `boolean` - Enable snap animations
 - `popupGap`: `number` - Gap between button and popup
 - `position`: `{ x: number; y: number }` - Initial/controlled position
@@ -75,13 +75,33 @@ export default function MyComponent() {
 
 ## Examples
 
+### Same offset for all edges
+
+```tsx
+<EdgeDock
+  dockMode="auto"
+  edgeOffset={16}
+  button={<button>🚀</button>}
+/>
+```
+
+### Different offset for each edge
+
+```tsx
+<EdgeDock
+  dockMode="auto"
+  edgeOffset={{ left: 10, right: 20, top: 15, bottom: 25 }}
+  button={<button>🎯</button>}
+/>
+```
+
 ### Restrict to horizontal edges only (left/right)
 
 ```tsx
 <EdgeDock
   dockMode="auto"
   allowedEdges={['left', 'right']}
-  edgeOffset={16}
+  edgeOffset={{ left: 16, right: 24 }}
   button={<button>📱</button>}
 />
 ```
@@ -102,7 +122,7 @@ export default function MyComponent() {
 <EdgeDock
   dockMode="manual"
   dockEdge="right"
-  edgeOffset={20}
+  edgeOffset={{ right: 20 }}
   button={<button>➡️</button>}
 />
 ```

package/dist/types.d.ts

@@ -27,6 +27,15 @@ export interface DockState {
     /** Whether the popup is currently open */
     isPopupOpen: boolean;
 }
+/**
+ * Edge offset configuration - can be a single number for all edges or individual values
+ */
+export type EdgeOffset = number | {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+};
 /**
  * Configuration for EdgeDock component
  */
@@ -43,8 +52,8 @@ export interface EdgeDockConfig {
     animation?: boolean;
     /** Gap between button and popup in pixels */
     popupGap?: number;
-    /** Offset from edge when docked (in pixels) */
-    edgeOffset?: number;
+    /** Offset from edge when docked - number for all edges or object for individual edges */
+    edgeOffset?: EdgeOffset;
     /** 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;AAwKjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAwT1E"}
+{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAkLjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAgV1E"}

package/dist/useEdgeDock.js

@@ -12,6 +12,16 @@ function getViewport() {
     }
     return { width: window.innerWidth, height: window.innerHeight };
 }
+/**
+ * Get offset value for a specific edge
+ */
+function getOffsetForEdge(edgeOffset, edge) {
+    if (!edgeOffset)
+        return 0;
+    if (typeof edgeOffset === 'number')
+        return edgeOffset;
+    return edgeOffset[edge] ?? 0;
+}
 /**
  * Calculate which edge is closest to the given position
  */
@@ -38,9 +48,10 @@ function getClosestEdge(pos, viewport, allowedEdges) {
 /**
  * Snap position to edge based on dock mode
  */
-function snapToEdge(pos, edge, viewport, buttonDimensions, offset = 0) {
+function snapToEdge(pos, edge, viewport, buttonDimensions, edgeOffset) {
     const halfWidth = buttonDimensions.width / 2;
     const halfHeight = buttonDimensions.height / 2;
+    const offset = getOffsetForEdge(edgeOffset, edge);
     switch (edge) {
         case 'left':
             return {
@@ -128,13 +139,13 @@ function calculatePopupPosition(buttonPos, buttonDimensions, popupDimensions, vi
  * Main hook for edge dock functionality
  */
 export function useEdgeDock(config = {}) {
-    const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset = 0, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, } = config;
+    const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, } = config;
     const buttonRef = useRef(null);
     const popupRef = useRef(null);
-    // Get initial viewport safely
-    const initialViewport = getViewport();
-    // Internal state
-    const [position, setPositionInternal] = useState(controlledPosition || { x: initialViewport.width - 60, y: initialViewport.height - 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);
@@ -158,6 +169,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edge-dock",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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",