Packages@robojs/sync
useSyncDrag()
Function: useSyncDrag()
function useSyncDrag<T, ClientData>(
key,
initialState,
options?): DragResult<T, ClientData>Hook for creating draggable elements with synchronized positions.
Handles locking, interpolation, bounds, and gesture detection automatically. Returns handlers to spread onto your draggable element.
Type Parameters
Parameters
| Parameter | Type |
|---|---|
key | (null | string)[] |
initialState | T |
options? | DragOptions<T> |
Returns
DragResult<T, ClientData>
Example
function DraggableBall({ id }: { id: string }) {
const { state, isDragging, canInteract, dragHandlers } = useSyncDrag(
['ball', id],
{ x: 0.5, y: 0.5 },
{ interpolate: { x: 0.2, y: 0.2 }, bounds: { minX: 0.05, maxX: 0.95, minY: 0.05, maxY: 0.95 } }
)
return (
<div
{...dragHandlers}
style={{
position: 'absolute',
left: `${state.x * 100}%`,
top: `${state.y * 100}%`,
cursor: isDragging ? 'grabbing' : canInteract ? 'grab' : 'not-allowed'
}}
>
Ball
</div>
)
}