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

# 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

# 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