Can now pass a function to be called when rendering the resize handles

Author: Stephen Gibson

src/components/Space.tsx

@@ -39,6 +39,7 @@ const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) =
 		onTouchMove,
 		onTouchEnd,
 		children,
+        handleRender
 	} = props;
 
 	const events = {
@@ -88,8 +89,8 @@ const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) =
 
 	return (
 		<>
-			{resizeHandles.mouseHandles.map((r) => (
-				<div {...r} />
+			{resizeHandles.mouseHandles.map((handleProps) => (
+				handleRender?.(handleProps) || <div {...handleProps} />
 			))}
 			{React.createElement(
 				props.as || "div",

src/components/stories/00-docs/05-CustomHandles.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import { withKnobs } from "@storybook/addon-knobs";
+import { action } from '@storybook/addon-actions';
+import { ViewPort, Fill } from "../../";
+import { description } from "../Utils";
+import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";
+
+<CommonHeader />
+
+<Meta title="React Spaces/Custom resize handles" />
+
+# Custom resize handles
+
+React spaces allows you to pass custom components to be used as resize handles using the `handleRender` prop. 
+This is an alternative to overriding the default css classes and will give you more control.
+
+Pass a function to the `handleRender` prop that will be called for every resize handle on that component. 
+
+```tsx
+// This example is literally what happens under the hood
+<BottomResizable 
+    size="50%" 
+    handleRender={(props: IResizeHandleProps) => <div {...props}></div>}>
+</BottomResizable>
+```
+
+You can determine the position of the handle by accessing the `props.key` property. This will allow you to render different handles depending
+on where it should be positioned.
+
+It's also important that you pass following props to the **top level** element for your custom component, if you don't resizing will not work on mouse drag:
+
+```tsx
+onMouseDown: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
+```

src/components/stories/01-examples/05-CustomHandles.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import { withKnobs } from "@storybook/addon-knobs";
+import { action } from '@storybook/addon-actions';
+import { ViewPort, Fill, BottomResizable } from "../../";
+import { green, description } from "../Utils";
+import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";
+
+<CommonHeader />
+
+<Meta title="Basic examples/Custom resize handles" />
+
+### Custom resize handles
+
+Example of a custom resize handle that renders an up arrow for bottom or top resizable
+
+<Canvas>
+	<Story name="Simple example">
+        <ViewPort>
+            <BottomResizable 
+                style={green} 
+                size="50%" 
+                onResizeStart={action('onResizeStart')} 
+                onResizeEnd={action('onResizeEnd')}
+                handleRender={(props) => 
+                    ["top", "bottom"].includes(props.key) && <div {...props} style={{display: "flex", justifyContent: "center"}}>
+                        <div style={{position: "absolute", transform: "translateY(-50%)"}}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrows-expand" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
+                            </svg>
+                        </div>
+                    </div>
+                }
+            >
+                {description("I have an additional arrow on my handle")}
+            </BottomResizable>
+        </ViewPort>
+	</Story>
+</Canvas>

src/core-react.ts

@@ -127,7 +127,7 @@ export function useSpace(props: ISpaceProps) {
 	return { space: space, resizeHandles: resizeHandles, domRect: domRect, elementRef: elementRef };
 }
 
-interface IResizeHandleProps {
+export interface IResizeHandleProps {
 	id?: string;
 	key: string | number;
 	className?: string;

src/core-types.ts

@@ -1,3 +1,6 @@
+import { ReactNode } from "react";
+import { IResizeHandleProps } from "./core-react";
+
 export enum Type {
 	ViewPort = "viewport",
 	Fixed = "fixed",
@@ -74,6 +77,7 @@ export interface ISpaceProps extends ICommonProps {
 	position?: IPositionalProps | undefined;
 	handleSize?: number | undefined;
 	handlePlacement?: ResizeHandlePlacement;
+    handleRender?: (handleProps: IResizeHandleProps) => ReactNode
 	touchHandleSize?: number | undefined;
 	minimumSize?: number | undefined;
 	maximumSize?: number | undefined;