@vx/drag

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

Installation

npm install --save @vx/drag

Examples

Components

APIs

#<Drag />

# Drag.heightnumberrequired

Height of the drag container.

# Drag.widthnumberrequired

Width of the drag container.

# Drag.captureDragAreabooleanoptional

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

Default true

# Drag.childrenstring | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((args: ChildrenArgs) => ReactNode)optional

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

# Drag.onDragEnd(args: HandlerArgs) => voidoptional

Optional callback invoked upon drag end.

# Drag.onDragMove(args: HandlerArgs) => voidoptional

Optional callback invoked upon drag movement.

# Drag.onDragStart(args: HandlerArgs) => voidoptional

Optional callback invoked upon drag start.

# Drag.resetOnStartbooleanoptional

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

Default false