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