feat: expose onPreResize callback

.changeset/funny-pianos-type.md

@@ -0,0 +1,5 @@
+---
+"react-flexy-panels": patch
+---
+
+feat: expose onPreResize prop on handle to allow any preprocess to be done before the panels are resized

README.md

@@ -7,11 +7,11 @@ A flexible, resizable panel system for React applications version >= 18 with sup
 ## Features
 
 - 🎨 **Flexible Layouts** - Support for both horizontal and vertical panel arrangements
+- 🎛️ **Customizable** - Support for pixel, percentage, and auto-sizing units
+- 🎭 **Unstyled** - No default styles, giving you full control over appearance
 - 🔄 **Resizable Panels** - Drag handles to resize panels dynamically
 - 📦 **Tree-shakeable** - Optimized for minimal bundle size
-- 🎯 **TypeScript** - Full TypeScript support with type definitions
 - 🪶 **Lightweight** - Minimal dependencies, only React as a peer dependency
-- 🎛️ **Customizable** - Support for pixel, percentage, and auto-sizing units
 
 ## Installation
 

packages/react-flexy-panels/README.md

@@ -7,11 +7,11 @@ A flexible, resizable panel system for React applications version >= 18 with sup
 ## Features
 
 - 🎨 **Flexible Layouts** - Support for both horizontal and vertical panel arrangements
+- 🎛️ **Customizable** - Support for pixel, percentage, and auto-sizing units
+- 🎭 **Unstyled** - No default styles, giving you full control over appearance
 - 🔄 **Resizable Panels** - Drag handles to resize panels dynamically
 - 📦 **Tree-shakeable** - Optimized for minimal bundle size
-- 🎯 **TypeScript** - Full TypeScript support with type definitions
 - 🪶 **Lightweight** - Minimal dependencies, only React as a peer dependency
-- 🎛️ **Customizable** - Support for pixel, percentage, and auto-sizing units
 
 ## Installation
 

packages/react-flexy-panels/src/components/FlexyPanelHandle/FlexyPanelHandle.tsx

@@ -7,7 +7,7 @@ import { FlexyPanelHandleProps } from "./types";
 export const FlexyPanelHandle = forwardRef<
   HTMLDivElement,
   FlexyPanelHandleProps
->(({ onMouseDown, onTouchStart, ...props }, ref) => {
+>(({ onMouseDown, onTouchStart, onPreResize, ...props }, ref) => {
   const id = useId();
   const { direction } = useFlexyPanelsContext();
   const {
@@ -16,6 +16,7 @@ export const FlexyPanelHandle = forwardRef<
   } = usePanelDrag({
     direction,
     handleId: id,
+    onPreResize,
   });
 
   const handleMouseDown = useCallback(

packages/react-flexy-panels/src/components/FlexyPanelHandle/types/FlexyPanelHandleProps.t.ts

@@ -1,3 +1,6 @@
 import { ComponentProps } from "react";
+import { OnPreResizeFunction } from "../../../types";
 
-export type FlexyPanelHandleProps = ComponentProps<"div">;
+export type FlexyPanelHandleProps = ComponentProps<"div"> & {
+  onPreResize?: OnPreResizeFunction;
+};

packages/react-flexy-panels/src/hooks/usePanelDrag.ts

@@ -1,16 +1,21 @@
-import { Direction } from "../types";
+import { Direction, OnPreResizeFunction } from "../types";
 import { findAdjacentPanels, updatePanelSizes } from "../utils";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 type UsePanelDragOptions = {
   direction: Direction;
   handleId: string;
+  onPreResize?: OnPreResizeFunction;
 };
 
 /**
  * Custom hook to handle panel dragging logic
  */
-export const usePanelDrag = ({ direction, handleId }: UsePanelDragOptions) => {
+export const usePanelDrag = ({
+  direction,
+  handleId,
+  onPreResize,
+}: UsePanelDragOptions) => {
   const [isDragging, setIsDragging] = useState(false);
   const dragStartRef = useRef<number>(0);
   const handleElementRef = useRef<HTMLElement | null>(null);
@@ -43,14 +48,15 @@ export const usePanelDrag = ({ direction, handleId }: UsePanelDragOptions) => {
         dragDelta,
         direction,
         unappliedDragDelta: unappliedDragDeltaRef.current,
+        onPreResize,
       });
 
       unappliedDragDeltaRef.current =
         unappliedDragDeltaRef.current + (dragDelta - appliedDragDelta);
 
       dragStartRef.current = dragCurrent;
     },
-    [direction, handleId]
+    [direction, handleId, onPreResize]
   );
 
   const onDrag = useCallback(

packages/react-flexy-panels/src/types/OnPreResizeFunction.t.ts

@@ -0,0 +1,4 @@
+export type OnPreResizeFunction = (sizes: {
+  panel1NewSize: number;
+  panel2NewSize: number;
+}) => void;

packages/react-flexy-panels/src/types/index.ts

@@ -1 +1,2 @@
 export * from "./Direction.t";
+export * from "./OnPreResizeFunction.t";

packages/react-flexy-panels/src/utils/updatePanelSizes.ts

@@ -1,4 +1,4 @@
-import { Direction } from "../types";
+import { Direction, OnPreResizeFunction } from "../types";
 import { getPanelSizeByDirection } from "./getPanelSizeByDirection";
 import { isSameSign } from "./isSameSign";
 
@@ -13,8 +13,9 @@ export function updatePanelSizes(props: {
   dragDelta: number;
   direction: Direction;
   unappliedDragDelta: number;
+  onPreResize?: OnPreResizeFunction;
 }): number {
-  const { panel1, panel2, direction, unappliedDragDelta } = props;
+  const { panel1, panel2, direction, unappliedDragDelta, onPreResize } = props;
   let dragDelta = props.dragDelta;
 
   if (dragDelta === 0) {
@@ -92,6 +93,12 @@ export function updatePanelSizes(props: {
     panel2NewSize = Math.max(minPanelSize, panel2NewSize);
   }
 
+  // Call the onPreResize function to allow any custom logic to be applied before the panel sizes are updated
+  onPreResize?.({
+    panel1NewSize,
+    panel2NewSize,
+  });
+
   // Handle different unit combinations
   if (panel1Unit === "auto" && panel2Unit === "auto") {
     panel1.style.flex = `0 1 ${panel1NewSize}px`;