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