@vx/drag

@vx/drag provides react components for making items within an interface (or chart) draggable.

Installation

npm install --save @vx/drag

Examples

Drag i

<Drag.Drag />>

Drag ii

<Drag.Drag />

Components

<Drag />

APIs

#<Drag />

# Drag.heightnumberrequired

Height of the drag container.

# Drag.widthnumberrequired

Width of the drag container.

# Drag.captureDragAreaboolean | undefinedoptional

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

Default true

# Drag.children

string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ... 4 more ... | undefined

optional

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

# Drag.onDragEnd((args: HandlerArgs) => void) | undefinedoptional

Optional callback invoked upon drag end.

# Drag.onDragMove((args: HandlerArgs) => void) | undefinedoptional

Optional callback invoked upon drag movement.

# Drag.onDragStart((args: HandlerArgs) => void) | undefinedoptional

Optional callback invoked upon drag start.

# Drag.resetOnStartboolean | undefinedoptional

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

Default false