Hooks

useSidebarResize

Pointer and keyboard resizing state for Sidebar.

Installed to components/refined-ui/hooks/use-sidebar-resize.ts with the Sidebar primitive. It is local UI behavior — yours to own and edit.

Used by Sidebar

Source

Installed hook source

Behavior hook

src/registry/hooks/use-sidebar-resize.ts

"use client";

import type { KeyboardEvent, PointerEvent as ReactPointerEvent } from "react";

import { useEffect, useRef, useState } from "react";

export type UseSidebarResizeOptions = {

defaultWidth: number;

minWidth: number;

maxWidth: number;

};

export type SidebarResize = {

width: number;

dragging: boolean;

onPointerDown: (event: ReactPointerEvent) => void;

onKeyDown: (event: KeyboardEvent) => void;

};

// component owns handle markup so a skin can style it; hook just returns width + handlers to wire on

export function useSidebarResize({ defaultWidth, minWidth, maxWidth }: UseSidebarResizeOptions): SidebarResize {

const [width, setWidth] = useState(defaultWidth);

const [dragging, setDragging] = useState(false);

const start = useRef({ x: 0, width: defaultWidth });

useEffect(() => {

if (!dragging) return;

function onMove(event: globalThis.PointerEvent) {

const next = Math.min(maxWidth, Math.max(minWidth, start.current.width + (event.clientX - start.current.x)));

setWidth(next);

}

function onUp() {

setDragging(false);

}

const previousCursor = document.body.style.cursor;

const previousSelect = document.body.style.userSelect;

document.body.style.cursor = "col-resize";

document.body.style.userSelect = "none";

window.addEventListener("pointermove", onMove);

window.addEventListener("pointerup", onUp);

return () => {

window.removeEventListener("pointermove", onMove);

window.removeEventListener("pointerup", onUp);

document.body.style.cursor = previousCursor;

document.body.style.userSelect = previousSelect;

};

}, [dragging, minWidth, maxWidth]);

function onPointerDown(event: ReactPointerEvent) {

start.current = { x: event.clientX, width };

setDragging(true);

event.preventDefault();

}

function onKeyDown(event: KeyboardEvent) {

if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;

event.preventDefault();

const delta = event.key === "ArrowRight" ? 16 : -16;

setWidth((current) => Math.min(maxWidth, Math.max(minWidth, current + delta)));

}

return { width, dragging, onPointerDown, onKeyDown };

}

Refined UI

useSidebarResize

Source