zidanehooks/useResizeDrag
import { … } from 'zidane-ui'ui/src/hooks/useResizeDrag.ts
Functions#
clampWidthFunction#
Clamps a size to a range and rounds it to whole pixels.
function clampWidth(value: number, min: number, max: number): numberParameters
| Name | Type | Description |
|---|---|---|
| value | number | The size to clamp. |
| min | number | The lower bound. |
| max | number | The upper bound. |
Returns
numberThe clamped, rounded size.
useResizeDragFunction#
Resizes a side panel by dragging its edge. While dragging, it writes the clamped size to a CSS
variable on target without React state changes, and calls onCommit once on release.
function useResizeDrag(options: ResizeDragOptions): ResizeDragParameters
| Name | Type | Description |
|---|---|---|
| options | ResizeDragOptions | See |
Returns
ResizeDragWhether a drag is active, and the props for the handle.
Interfaces#
ResizeDragInterface#
What useResizeDrag returns.
interface ResizeDragProperties
| Name | Type | Description |
|---|---|---|
| active | boolean | Whether a drag is in progress. |
| handleProps | ResizeDragHandleProps | Props to spread onto the handle element. |
ResizeDragHandlePropsInterface#
Props useResizeDrag returns for the drag handle element.
interface ResizeDragHandlePropsProperties
| Name | Type | Description |
|---|---|---|
| aria-orientation | 'horizontal' | 'vertical' | Orientation of the separator: |
| aria-valuemax | number | The largest size. |
| aria-valuemin | number | The smallest size. |
| aria-valuenow | number | The current size. |
| onDoubleClick | () => void | Resets the size to |
| onPointerDown | (e: PointerEvent<HTMLElement>) => void | Starts a drag on a primary-button press, with pointer capture. |
| role | 'separator' | The handle is a |
| tabIndex | -1 | The handle is not in the tab order. |
ResizeDragOptionsInterface#
Options of useResizeDrag.
interface ResizeDragOptionsProperties
| Name | Type | Description |
|---|---|---|
| axis? | 'x' | 'y' |
|
| defaultValue | number | Size in px restored by a double-click on the handle. |
| edge | 'start' | 'end' | Which side of the element the handle sits on. |
| max | number | Largest size in px a drag can reach. |
| min | number | Smallest size in px a drag can reach. |
| onCommit | (width: number) => void | Called once on release with the final size in px, and on a double-click with |
| target | { cssVar: string; ref: RefObject<HTMLElement | null> } | Element whose CSS variable receives the live width during a drag. |
| value | number | The current size in px. A drag starts from it. |