React Simple Drag & Drop

A simple ReactJS drag & drop library.

Renamed from @hoc-ht/react-simple-dnd.

Installation

Run the following command:

npm install react-simple-drag-drop

Usage

See the example in the example folder for detail.

Props

<SimpleDragDrop />

Wraps the part of your application you want to have drag and drop enabled for

Props	Type	Default value	Description
onDragStart	function		Callback triggered when a drag has started
onDragEnd	function		Callback triggered when a drag has ended
getDragMetadata	function		Use this callback when a drag has started to inject your custom drag data
fixedItemHeight	number	0	Use this props if you want to resize the dragging item base on this value

<Droppable />

An area that can be dropped into. Contains <Draggable />

Props	Type	Default value	Description
children (required)	function
droppableId (required)	string
isDropDisabled	bool	false
fixedGap	number		Define the gap between two <Draggable /> items
validation	function		function({draggableId, source, metadata}, event) {} triggered when a drag has started or manually call revalidate method, should return false or throw an error to disable drop on this area

All other props will be passed as droppable config and can be access in the result of onDragEnd method.

<Draggable />

What can be dragged around

Props	Type	Default value	Description
children (required)	function
draggableId (required)	string
index	number		Current item index

Important note: All draggableId in a <SimpleDragDrop /> should be unique.

<DraggingItem />

Custom rendering dragging item if you want

Props	Type	Default value	Description
children (required)	function		function ({droppableItem, source, metadata}) {}

Methods

revalidate(event)

Trigger validation for all <Droppable /> item.

• event: event which will be passed to validation method

Return: none

Authors

• Hoang Thai Hoc @hoc-ht

License

MIT