Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

visx

@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 i

<Drag.Drag />>

Drag ii

<Drag.Drag />

APIs

#useDrag()

# dxnumber

Optionally set the initial drag dx, or override the current drag dx.

# dynumber

Optionally set the initial drag dy, or override the current drag dy.

# isDraggingboolean

If defined, parent controls dragging state.

# onDragEnd(args: HandlerArgs) => void

Optional callback invoked upon drag end.

# onDragMove(args: HandlerArgs) => void

Optional callback invoked upon drag movement.

# onDragStart(args: HandlerArgs) => void

Optional callback invoked upon drag start.

# resetOnStartboolean

Whether to reset drag state upon the start of a new drag.

Default false

# restrict{ xMin?: number; xMax?: number; yMin?: number; yMax?: number; }

Options for limiting dragging in the x and y plane.

Default {}

# restrictToPathSVGGeometryElement

Limit drag to an SVG path. Overrides restrict constraints.

# snapToPointerboolean

Snap element being dragged to middle of pointer.

Default true

# xnumber

Optionally set the initial drag x, or override the current drag x.

# ynumber

Optionally set the initial drag y, or override the current drag y.

#<Drag />

# children(args: UseDrag) => ReactNoderequired

Children render function which is passed the state of dragging and callbacks for drag start/end/move.

# heightnumberrequired

Height of the drag container.

# widthnumberrequired

Width of the drag container.

# captureDragAreaboolean

Whether to render an invisible rect below children to capture the drag area as defined by width and height.

Default true

# dxnumber

Optionally set the initial drag dx, or override the current drag dx.

# dynumber

Optionally set the initial drag dy, or override the current drag dy.

# isDraggingboolean

If defined, parent controls dragging state. If defined, parent controls dragging state.

# onDragEnd(args: HandlerArgs) => void

Optional callback invoked upon drag end.

# onDragMove(args: HandlerArgs) => void

Optional callback invoked upon drag movement.

# onDragStart(args: HandlerArgs) => void

Optional callback invoked upon drag start.

# resetOnStartboolean

Whether to reset drag state upon the start of a new drag.

# restrict{ xMin?: number; xMax?: number; yMin?: number; yMax?: number; }

Options for limiting dragging in the x and y plane.

# restrictToPathSVGGeometryElement

Limit drag to an SVG path. Overrides restrict constraints.

# snapToPointerboolean

Snap element being dragged to middle of pointer.

Default true

# xnumber

Optionally set the initial drag x, or override the current drag x.

# ynumber

Optionally set the initial drag y, or override the current drag y.