Data utilities
Umbrella package
@visx/drag
@visx/drag
provides react
components and hooks for making items within an interface (or chart) draggable.
Installation
npm install --save @visx/drag
Examples
<Drag.Drag />>
<Drag.Drag />
APIs
#useDrag()
number | undefined
Optionally set the initial drag dx, or override the current drag dx.
number | undefined
Optionally set the initial drag dy, or override the current drag dy.
boolean | undefined
If defined, parent controls dragging state.
((args: HandlerArgs) => void) | undefined
Optional callback invoked upon drag end.
((args: HandlerArgs) => void) | undefined
Optional callback invoked upon drag movement.
((args: HandlerArgs) => void) | undefined
Optional callback invoked upon drag start.
boolean | undefined
Whether to reset drag state upon the start of a new drag.
Default false
{ xMin?: number | undefined; xMax?: number | undefined; yMin?: number | undefined; yMax?: number | undefined; } | undefined
Options for limiting dragging in the x and y plane.
Default {}
SVGGeometryElement | null | undefined
Limit drag to an SVG path. Overrides restrict
constraints.
boolean | undefined
Snap element being dragged to middle of pointer.
Default true
number | undefined
Optionally set the initial drag x, or override the current drag x.
number | undefined
Optionally set the initial drag y, or override the current drag y.
#<Drag />
Children render function which is passed the state of dragging and callbacks for drag start/end/move.
Height of the drag container.
Width of the drag container.
boolean | undefined
Whether to render an invisible rect below children to capture the drag area as defined by width and height.
Default true
number | undefined
Optionally set the initial drag dx, or override the current drag dx.
number | undefined
Optionally set the initial drag dy, or override the current drag dy.
boolean | undefined
If defined, parent controls dragging state. If defined, parent controls dragging state.
((args: HandlerArgs) => void) | undefined
Optional callback invoked upon drag end.
((args: HandlerArgs) => void) | undefined
Optional callback invoked upon drag movement.
((args: HandlerArgs) => void) | undefined
Optional callback invoked upon drag start.
boolean | undefined
Whether to reset drag state upon the start of a new drag.
{ xMin?: number | undefined; xMax?: number | undefined; yMin?: number | undefined; yMax?: number | undefined; } | undefined
Options for limiting dragging in the x and y plane.
SVGGeometryElement | null | undefined
Limit drag to an SVG path. Overrides restrict
constraints.
boolean | undefined
Snap element being dragged to middle of pointer.
Default true
number | undefined
Optionally set the initial drag x, or override the current drag x.
number | undefined
Optionally set the initial drag y, or override the current drag y.