@hoc-ht/react-simple-dnd
v1.3.1
Published
A simple ReactJS drag & drop library.
Downloads
4
Readme
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