react-resizable-panels - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

CHANGELOG.md

 # Changelog
 
+## 0.0.7
+* Add `PanelContext` with `activeHandleId` property identifying the resize handle currently being dragged (or `null`). This enables more customized UI/UX when resizing is in progress.
 ## 0.0.6
@@ -4,0 +6,0 @@ * [#5](https://github.com/bvaughn/react-resizable-panels/issues/5): Removed `panelBefore` and `panelAfter` props from `PanelResizeHandle`. `PanelGroup` now infers this based on position within the group.

dist/react-resizable-panels.d.ts

 import { ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
+export const PanelContext: import("react").Context<{
+    activeHandleId: string | null;
+}>;
 export function Panel({ children, className, defaultSize, id, minSize, order, }: {
@@ -20,8 +23,9 @@ children?: ReactNode;
 export function PanelGroup({ autoSaveId, children, className, direction, height, width, }: Props): JSX.Element;
-export function PanelResizeHandle({ children, className, disabled, }: {
+export function PanelResizeHandle({ children, className, disabled, id: idProp, }: {
     children?: ReactNode;
     className?: string;
     disabled?: boolean;
+    id?: string | null;
 }): JSX.Element;
 
 //# sourceMappingURL=react-resizable-panels.d.ts.map

dist/react-resizable-panels.js

@@ -9,2 +9,3 @@ var $b2QPe$reactjsxdevruntime = require("react/jsx-dev-runtime");
 $parcel$export(module.exports, "Panel", () => $6d390b7f2e6b107f$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "PanelContext", () => $3251d17c1c3bce6c$export$f34532ac99e32150);
 $parcel$export(module.exports, "PanelGroup", () => $d428eaeef644efb2$export$2e2bcd8739ae039);
@@ -15,2 +16,3 @@ $parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$export$2e2bcd8739ae039);
 
+const $3251d17c1c3bce6c$export$f34532ac99e32150 = (0, $b2QPe$react.createContext)(null);
 const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext)(null);
@@ -62,7 +64,8 @@
 
+
 let $6d548a0d130941e3$var$counter = 0;
-function $6d548a0d130941e3$export$2e2bcd8739ae039() {
-    const idRef = (0, $b2QPe$react.useRef)(null);
-    if (idRef.current === null) idRef.current = $6d548a0d130941e3$var$counter++;
-    return "" + idRef.current;
+function $6d548a0d130941e3$export$2e2bcd8739ae039(id = null) {
+    const idRef = (0, $b2QPe$react.useRef)(id);
+    if (idRef.current === null) idRef.current = "" + $6d548a0d130941e3$var$counter++;
+    return idRef.current;
 }
@@ -72,5 +75,32 @@
 
+function $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) {
+    try {
+        const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        if (serialized) {
+            const parsed = JSON.parse(serialized);
+            if (typeof parsed === "object" && parsed != null) return parsed;
+        }
+    } catch (error) {}
+    return null;
+}
+function $e045b0dd313f33c7$export$9c80c6617f0386da(autoSaveId, panelIds) {
+    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId);
+    if (state) return state[panelIds.join(",")] ?? null;
+    return null;
+}
+function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panelIds, sizes) {
+    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) || {};
+    state[panelIds.join(",")] = sizes;
+    try {
+        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+
 const $d428eaeef644efb2$var$PRECISION = 5;
 function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
     const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)();
+    const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
     const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
@@ -105,6 +135,6 @@ // 0-1 values representing the relative size of each panel.
         let defaultSizes = undefined;
-        if (autoSaveId) try {
-            const value = localStorage.getItem($d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels));
-            if (value) defaultSizes = JSON.parse(value);
-        } catch (error) {}
+        if (autoSaveId) {
+            const panelIds = $d428eaeef644efb2$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            defaultSizes = (0, $e045b0dd313f33c7$export$9c80c6617f0386da)(autoSaveId, panelIds);
+        }
         if (defaultSizes != null) setSizes(defaultSizes);
@@ -123,6 +153,7 @@ else {
     (0, $b2QPe$react.useEffect)(()=>{
+        // If this panel has been configured to persist sizing information, save sizes to local storage.
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
-            // If this panel has been configured to persist sizing information, save sizes to local storage.
-            localStorage.setItem($d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels), JSON.stringify(sizes));
+            const panelIds = $d428eaeef644efb2$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            (0, $e045b0dd313f33c7$export$af183b313c61be4f)(autoSaveId, panelIds, sizes);
         }
@@ -195,3 +226,3 @@ }, [
     }, []);
-    const context = (0, $b2QPe$react.useMemo)(()=>({
+    const panelGroupContext = (0, $b2QPe$react.useMemo)(()=>({
             direction: direction,
@@ -202,2 +233,4 @@ getPanelStyle: getPanelStyle,
             registerResizeHandle: registerResizeHandle,
+            startDragging: (id)=>setActiveHandleId(id),
+            stopDragging: ()=>setActiveHandleId(null),
             unregisterPanel: unregisterPanel
@@ -212,10 +245,22 @@ }), [
     ]);
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
-        value: context,
-        children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
-            className: className,
-            children: children
+    const panelContext = (0, $b2QPe$react.useMemo)(()=>({
+            activeHandleId: activeHandleId
+        }), [
+        activeHandleId
+    ]);
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$f34532ac99e32150).Provider, {
+        value: panelContext,
+        children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
+            value: panelGroupContext,
+            children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
+                className: className,
+                children: children
+            }, void 0, false, {
+                fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+                lineNumber: 247,
+                columnNumber: 9
+            }, this)
         }, void 0, false, {
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 243,
+            lineNumber: 246,
             columnNumber: 7
@@ -225,3 +270,3 @@ }, this)
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 242,
+        lineNumber: 245,
         columnNumber: 5
@@ -268,7 +313,2 @@ }, this);
 }
-function $d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels) {
-    const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
-    const panelIds = panelsArray.map((panel)=>panel.id);
-    return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
-}
 function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width) {
@@ -303,10 +343,11 @@ const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
 
-function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false  }) {
-    const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
-    if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-    const id = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)();
-    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle  } = context;
-    const setGroupId = (0, $b2QPe$react.useState)(null);
+function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idProp = null  }) {
+    const panelContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$f34532ac99e32150));
+    const panelGroupContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
+    if (panelContext === null || panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+    const id = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idProp);
+    const { activeHandleId: activeHandleId  } = panelContext;
+    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging  } = panelGroupContext;
+    const isDragging = activeHandleId === id;
     const [resizeHandler, setResizeHandler] = (0, $b2QPe$react.useState)(null);
-    const [isDragging, setIsDragging] = (0, $b2QPe$react.useState)(false);
     (0, $b2QPe$react.useEffect)(()=>{
@@ -327,19 +368,15 @@ if (disabled) setResizeHandler(null);
         document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
-        const onMouseLeave = (_)=>{
-            setIsDragging(false);
-        };
         const onMouseMove = (event)=>{
             resizeHandler(event);
         };
-        const onMouseUp = (_)=>{
-            setIsDragging(false);
-        };
-        document.body.addEventListener("mouseleave", onMouseLeave);
+        document.body.addEventListener("mouseleave", stopDragging);
         document.body.addEventListener("mousemove", onMouseMove);
-        document.body.addEventListener("mouseup", onMouseUp);
+        document.body.addEventListener("touchmove", onMouseMove);
+        document.body.addEventListener("mouseup", stopDragging);
         return ()=>{
             document.body.style.cursor = "";
-            document.body.removeEventListener("mouseleave", onMouseLeave);
+            document.body.removeEventListener("mouseleave", stopDragging);
             document.body.removeEventListener("mousemove", onMouseMove);
-            document.body.removeEventListener("mouseup", onMouseUp);
+            document.body.removeEventListener("touchmove", onMouseMove);
+            document.body.removeEventListener("mouseup", stopDragging);
         };
@@ -350,3 +387,4 @@ }, [
         isDragging,
-        resizeHandler
+        resizeHandler,
+        stopDragging
     ]);
@@ -357,4 +395,6 @@ return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
         "data-panel-resize-handle-id": id,
-        onMouseDown: ()=>setIsDragging(true),
-        onMouseUp: ()=>setIsDragging(false),
+        onMouseDown: ()=>startDragging(id),
+        onMouseUp: stopDragging,
+        onTouchStart: ()=>startDragging(id),
+        onTouchEnd: stopDragging,
         style: {
@@ -366,3 +406,3 @@ cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 76,
+        lineNumber: 80,
         columnNumber: 5
@@ -369,0 +409,0 @@ }, this);

dist/react-resizable-panels.module.js

@@ -7,2 +7,3 @@ import {jsxDEV as $fpI56$jsxDEV} from "react/jsx-dev-runtime";
 
+const $f922724f4bad4884$export$f34532ac99e32150 = (0, $fpI56$createContext)(null);
 const $f922724f4bad4884$export$7d8c6d083caec74a = (0, $fpI56$createContext)(null);
@@ -54,7 +55,8 @@
 
+
 let $968185313205dcfa$var$counter = 0;
-function $968185313205dcfa$export$2e2bcd8739ae039() {
-    const idRef = (0, $fpI56$useRef)(null);
-    if (idRef.current === null) idRef.current = $968185313205dcfa$var$counter++;
-    return "" + idRef.current;
+function $968185313205dcfa$export$2e2bcd8739ae039(id = null) {
+    const idRef = (0, $fpI56$useRef)(id);
+    if (idRef.current === null) idRef.current = "" + $968185313205dcfa$var$counter++;
+    return idRef.current;
 }
@@ -64,5 +66,32 @@
 
+function $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) {
+    try {
+        const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        if (serialized) {
+            const parsed = JSON.parse(serialized);
+            if (typeof parsed === "object" && parsed != null) return parsed;
+        }
+    } catch (error) {}
+    return null;
+}
+function $6ff1a22b27cc039d$export$9c80c6617f0386da(autoSaveId, panelIds) {
+    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId);
+    if (state) return state[panelIds.join(",")] ?? null;
+    return null;
+}
+function $6ff1a22b27cc039d$export$af183b313c61be4f(autoSaveId, panelIds, sizes) {
+    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) || {};
+    state[panelIds.join(",")] = sizes;
+    try {
+        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+
 const $c44ee3356398c8a1$var$PRECISION = 5;
 function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
     const groupId = (0, $968185313205dcfa$export$2e2bcd8739ae039)();
+    const [activeHandleId, setActiveHandleId] = (0, $fpI56$useState)(null);
     const [panels, setPanels] = (0, $fpI56$useState)(new Map());
@@ -97,6 +126,6 @@ // 0-1 values representing the relative size of each panel.
         let defaultSizes = undefined;
-        if (autoSaveId) try {
-            const value = localStorage.getItem($c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels));
-            if (value) defaultSizes = JSON.parse(value);
-        } catch (error) {}
+        if (autoSaveId) {
+            const panelIds = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            defaultSizes = (0, $6ff1a22b27cc039d$export$9c80c6617f0386da)(autoSaveId, panelIds);
+        }
         if (defaultSizes != null) setSizes(defaultSizes);
@@ -115,6 +144,7 @@ else {
     (0, $fpI56$useEffect)(()=>{
+        // If this panel has been configured to persist sizing information, save sizes to local storage.
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
-            // If this panel has been configured to persist sizing information, save sizes to local storage.
-            localStorage.setItem($c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels), JSON.stringify(sizes));
+            const panelIds = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            (0, $6ff1a22b27cc039d$export$af183b313c61be4f)(autoSaveId, panelIds, sizes);
         }
@@ -187,3 +217,3 @@ }, [
     }, []);
-    const context = (0, $fpI56$useMemo)(()=>({
+    const panelGroupContext = (0, $fpI56$useMemo)(()=>({
             direction: direction,
@@ -194,2 +224,4 @@ getPanelStyle: getPanelStyle,
             registerResizeHandle: registerResizeHandle,
+            startDragging: (id)=>setActiveHandleId(id),
+            stopDragging: ()=>setActiveHandleId(null),
             unregisterPanel: unregisterPanel
@@ -204,10 +236,22 @@ }), [
     ]);
-    return /*#__PURE__*/ (0, $fpI56$jsxDEV)((0, $f922724f4bad4884$export$7d8c6d083caec74a).Provider, {
-        value: context,
-        children: /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
-            className: className,
-            children: children
+    const panelContext = (0, $fpI56$useMemo)(()=>({
+            activeHandleId: activeHandleId
+        }), [
+        activeHandleId
+    ]);
+    return /*#__PURE__*/ (0, $fpI56$jsxDEV)((0, $f922724f4bad4884$export$f34532ac99e32150).Provider, {
+        value: panelContext,
+        children: /*#__PURE__*/ (0, $fpI56$jsxDEV)((0, $f922724f4bad4884$export$7d8c6d083caec74a).Provider, {
+            value: panelGroupContext,
+            children: /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
+                className: className,
+                children: children
+            }, void 0, false, {
+                fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+                lineNumber: 247,
+                columnNumber: 9
+            }, this)
         }, void 0, false, {
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 243,
+            lineNumber: 246,
             columnNumber: 7
@@ -217,3 +261,3 @@ }, this)
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 242,
+        lineNumber: 245,
         columnNumber: 5
@@ -260,7 +304,2 @@ }, this);
 }
-function $c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels) {
-    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
-    const panelIds = panelsArray.map((panel)=>panel.id);
-    return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
-}
 function $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, width) {
@@ -295,10 +334,11 @@ const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
 
-function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false  }) {
-    const context = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
-    if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-    const id = (0, $968185313205dcfa$export$2e2bcd8739ae039)();
-    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle  } = context;
-    const setGroupId = (0, $fpI56$useState)(null);
+function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idProp = null  }) {
+    const panelContext = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$f34532ac99e32150));
+    const panelGroupContext = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
+    if (panelContext === null || panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+    const id = (0, $968185313205dcfa$export$2e2bcd8739ae039)(idProp);
+    const { activeHandleId: activeHandleId  } = panelContext;
+    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging  } = panelGroupContext;
+    const isDragging = activeHandleId === id;
     const [resizeHandler, setResizeHandler] = (0, $fpI56$useState)(null);
-    const [isDragging, setIsDragging] = (0, $fpI56$useState)(false);
     (0, $fpI56$useEffect)(()=>{
@@ -319,19 +359,15 @@ if (disabled) setResizeHandler(null);
         document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
-        const onMouseLeave = (_)=>{
-            setIsDragging(false);
-        };
         const onMouseMove = (event)=>{
             resizeHandler(event);
         };
-        const onMouseUp = (_)=>{
-            setIsDragging(false);
-        };
-        document.body.addEventListener("mouseleave", onMouseLeave);
+        document.body.addEventListener("mouseleave", stopDragging);
         document.body.addEventListener("mousemove", onMouseMove);
-        document.body.addEventListener("mouseup", onMouseUp);
+        document.body.addEventListener("touchmove", onMouseMove);
+        document.body.addEventListener("mouseup", stopDragging);
         return ()=>{
             document.body.style.cursor = "";
-            document.body.removeEventListener("mouseleave", onMouseLeave);
+            document.body.removeEventListener("mouseleave", stopDragging);
             document.body.removeEventListener("mousemove", onMouseMove);
-            document.body.removeEventListener("mouseup", onMouseUp);
+            document.body.removeEventListener("touchmove", onMouseMove);
+            document.body.removeEventListener("mouseup", stopDragging);
         };
@@ -342,3 +378,4 @@ }, [
         isDragging,
-        resizeHandler
+        resizeHandler,
+        stopDragging
     ]);
@@ -349,4 +386,6 @@ return /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
         "data-panel-resize-handle-id": id,
-        onMouseDown: ()=>setIsDragging(true),
-        onMouseUp: ()=>setIsDragging(false),
+        onMouseDown: ()=>startDragging(id),
+        onMouseUp: stopDragging,
+        onTouchStart: ()=>startDragging(id),
+        onTouchEnd: stopDragging,
         style: {
@@ -358,3 +397,3 @@ cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 76,
+        lineNumber: 80,
         columnNumber: 5
@@ -367,3 +406,3 @@ }, this);
 
-export {$ad28bce87b00c2be$export$2e2bcd8739ae039 as Panel, $c44ee3356398c8a1$export$2e2bcd8739ae039 as PanelGroup, $b067b37706bb37b8$export$2e2bcd8739ae039 as PanelResizeHandle};
+export {$ad28bce87b00c2be$export$2e2bcd8739ae039 as Panel, $f922724f4bad4884$export$f34532ac99e32150 as PanelContext, $c44ee3356398c8a1$export$2e2bcd8739ae039 as PanelGroup, $b067b37706bb37b8$export$2e2bcd8739ae039 as PanelResizeHandle};
 //# sourceMappingURL=react-resizable-panels.module.js.map

package.json

 {
   "name": "react-resizable-panels",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React components for resizable panel groups/layouts",
@@ -5,0 +5,0 @@ "author": "Brian Vaughn <[e-mail]>",

README.md

@@ -49,2 +49,8 @@ # react-resizable-panels
 | `className`   | `?string`    | Class name
-| `disabled`    | `?boolean`   | Disable drag handle
+| `disabled`    | `?boolean`   | Disable drag handle
+| `id`          | `?string`    | Optional resize handle id (must be unique within the current group)
+
+### `PanelContext`
+| prop         | type                 | description
+| :----------- | :------------------- | :---
+| `activeHandleId` | `string \| null` | Resize handle currently being dragged (or `null`)

src/hooks/useUniqueId.ts

@@ -5,9 +5,9 @@ import { useRef } from "react";
 
-export default function useUniqueId(): string {
-  const idRef = useRef<number | null>(null);
+export default function useUniqueId(id: string | null = null): string {
+  const idRef = useRef<string | null>(id);
   if (idRef.current === null) {
-    idRef.current = counter++;
+    idRef.current = "" + counter++;
   }
 
-  return "" + idRef.current;
+  return idRef.current;
 }

src/index.ts

 import Panel from "./Panel";
+import { PanelContext } from "./PanelContexts";
 import PanelGroup from "./PanelGroup";
 import PanelResizeHandle from "./PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+export { Panel, PanelContext, PanelGroup, PanelResizeHandle };

src/PanelContexts.ts

@@ -5,2 +5,6 @@ import { CSSProperties, createContext } from "react";
 
+export const PanelContext = createContext<{
+  activeHandleId: string | null;
+} | null>(null);
+
 export const PanelGroupContext = createContext<{
@@ -12,3 +16,5 @@ direction: "horizontal" | "vertical";
   registerResizeHandle: (id: string) => ResizeHandler;
+  startDragging: (id: string) => void;
+  stopDragging: () => void;
   unregisterPanel: (id: string) => void;
 } | null>(null);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107768

increased by12.58%

Number of package files

17

increased by6.25%

Lines of code

1293

increased by10.99%

Number of lines in readme file

55

increased by12.24%

No dependency changes