ColumnResizeHandle

An invisible strip over the free edge of a column or a row, which starts a drag from useColumnResize. The column needs position: relative and draws its own border.

import { ColumnResizeHandle, useColumnResize } from '@basmilius/react-ui';

import { useRef, useState } from 'react';
import { ColumnResizeHandle, useColumnResize } from '@basmilius/react-ui';

export default function ColumnResizeHandleDemo() {
    const column = useRef<HTMLElement>(null);
    const [width, setWidth] = useState(220);
    const { startResize } = useColumnResize(column, { size: width, min: 160, max: () => 400, from: 'left', onSize: setWidth });

    return (
        <div className="flex h-56 w-full overflow-hidden rounded-lg border border-border bg-bg">
            <aside ref={column} className="relative shrink-0 border-r border-border bg-surface p-3 text-xs text-text-muted" style={{ width }}>
                Drag my right edge: {width} pixels.
                <ColumnResizeHandle from="left" onPointerDown={startResize} />
            </aside>
            <div className="grow p-3 text-xs text-text-faint">The rest of the view.</div>
        </div>
    );
}

from is the edge the column hangs from, the same value you hand the hook; the handle sits on the opposite edge. A column pinned to the left gets its handle on the right, and the cursor says which way it drags.

Props

Prop	Type
from	ColumnEdge	Required. 'left' | 'right' | 'top' | 'bottom'
onPointerDown	(event: PointerEvent) => void	Required. startResize from the hook.
className	string
ref	Ref<HTMLDivElement>

The handle takes the pointer only; give a column a keyboard way to change its size elsewhere, such as a menu item or a setting, if that matters in your app. ColumnResizeHandleProps is an exported type.