React Simple DnD
A simple ReactJS drag & drop library.
Installation
Run the following command:
npm install @hoc-ht/react-simple-dnd
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 |
---|---|---|---|
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 |
---|---|---|---|
draggableId (required) | string | ||
index | number | Current item index |
Important note: All draggableId
in a <SimpleDragDrop />
should be unique.
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