@supunlakmal/hooks
Version:
A collection of reusable React hooks
60 lines (59 loc) • 1.93 kB
TypeScript
interface DraggableOptions {
/** Initial position of the element. */
initialPosition?: {
x: number;
y: number;
};
/** Reference to a bounding container element. Dragging will be constrained within this container. */
boundsRef?: React.RefObject<HTMLElement>;
/** Specific bounding box coordinates (overrides boundsRef if provided). */
bounds?: {
top: number;
left: number;
right: number;
bottom: number;
};
/** Callback fired when dragging starts. */
onDragStart?: (position: {
x: number;
y: number;
}, event: PointerEvent) => void;
/** Callback fired continuously during dragging. */
onDrag?: (position: {
x: number;
y: number;
}, event: PointerEvent) => void;
/** Callback fired when dragging stops. */
onDragEnd?: (position: {
x: number;
y: number;
}, event: PointerEvent) => void;
/** Control the position externally. If provided, the hook operates in controlled mode. */
position?: {
x: number;
y: number;
};
/** Callback to update the position in controlled mode. */
onPositionChange?: (position: {
x: number;
y: number;
}) => void;
}
interface DraggableState {
/** Current position (x, y) of the element. */
position: {
x: number;
y: number;
};
/** Whether the element is currently being dragged. */
isDragging: boolean;
}
/**
* Makes a DOM element draggable using pointer events, supporting constraints and callbacks.
*
* @param ref React ref object attached to the draggable element.
* @param options Configuration options for draggable behavior.
* @returns State including the element's position and dragging status.
*/
export declare const useDraggable: <T extends HTMLElement>(ref: React.RefObject<T>, options?: DraggableOptions) => DraggableState;
export {};