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
Optionally set the initial drag dx, or override the current drag dx.
number
Optionally set the initial drag dy, or override the current drag dy.
boolean
If defined, parent controls dragging state.
(args: HandlerArgs) => void
Optional callback invoked upon drag end.
(args: HandlerArgs) => void
Optional callback invoked upon drag movement.
(args: HandlerArgs) => void
Optional callback invoked upon drag start.
boolean
Whether to reset drag state upon the start of a new drag.
Default false
{ xMin?: number; xMax?: number; yMin?: number; yMax?: number; }
Options for limiting dragging in the x and y plane.
Default {}
SVGGeometryElement
Limit drag to an SVG path. Overrides restrict
constraints.
boolean
Snap element being dragged to middle of pointer.
Default true
number
Optionally set the initial drag x, or override the current drag x.
number
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
Whether to render an invisible rect below children to capture the drag area as defined by width and height.
Default true
number
Optionally set the initial drag dx, or override the current drag dx.
number
Optionally set the initial drag dy, or override the current drag dy.
boolean
If defined, parent controls dragging state. If defined, parent controls dragging state.
(args: HandlerArgs) => void
Optional callback invoked upon drag end.
(args: HandlerArgs) => void
Optional callback invoked upon drag movement.
(args: HandlerArgs) => void
Optional callback invoked upon drag start.
boolean
Whether to reset drag state upon the start of a new drag.
{ xMin?: number; xMax?: number; yMin?: number; yMax?: number; }
Options for limiting dragging in the x and y plane.
SVGGeometryElement
Limit drag to an SVG path. Overrides restrict
constraints.
boolean
Snap element being dragged to middle of pointer.
Default true
number
Optionally set the initial drag x, or override the current drag x.
number
Optionally set the initial drag y, or override the current drag y.