Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
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 i
<Drag.Drag />>
Drag ii
<Drag.Drag />

APIs

#useDrag()

# dxnumber | undefined

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

# dynumber | undefined

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

# isDraggingboolean | undefined

If defined, parent controls dragging state.

# onDragEnd((args: HandlerArgs) => void) | undefined

Optional callback invoked upon drag end.

# onDragMove((args: HandlerArgs) => void) | undefined

Optional callback invoked upon drag movement.

# onDragStart((args: HandlerArgs) => void) | undefined

Optional callback invoked upon drag start.

# resetOnStartboolean | undefined

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

Default false

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

Options for limiting dragging in the x and y plane.

Default {}

# restrictToPathSVGGeometryElement | null | undefined

Limit drag to an SVG path. Overrides restrict constraints.

# snapToPointerboolean | undefined

Snap element being dragged to middle of pointer.

Default true

# xnumber | undefined

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

# ynumber | undefined

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 | undefined

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

Default true

# dxnumber | undefined

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

# dynumber | undefined

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

# isDraggingboolean | undefined

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

# onDragEnd((args: HandlerArgs) => void) | undefined

Optional callback invoked upon drag end.

# onDragMove((args: HandlerArgs) => void) | undefined

Optional callback invoked upon drag movement.

# onDragStart((args: HandlerArgs) => void) | undefined

Optional callback invoked upon drag start.

# resetOnStartboolean | undefined

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

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

Options for limiting dragging in the x and y plane.

# restrictToPathSVGGeometryElement | null | undefined

Limit drag to an SVG path. Overrides restrict constraints.

# snapToPointerboolean | undefined

Snap element being dragged to middle of pointer.

Default true

# xnumber | undefined

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

# ynumber | undefined

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

Exports