Native Drag & Drop List library in React

Did you know, HTML5 provides native drag and drop functionality?

Now, what if you are thinking to use it and we provide you a solution-ready library !

Drag and Drop is one of the most common features used across various applications.

Though, HTML5 provides drag & drop functionality, you still won’t be able to use it directly in your React application.

If you search across the internet, multiple solutions would be available, but unfortunately, they will either be heavy on your repository due to a huge bundle size or would be complex to integrate!

So now, here it is …

We have created a react based component, which is easy to integrate and has a bundle size ≤ 7KB.

This module is highly customizable and provides all possible callbacks to make it more convenient and comfortable to use.

Here are the some glimpes of our component -

Drag and Drop Example

Curious to know how to integrate?
Follow these simple steps to integrate:

import ListDragDrop from 'listdragdrop';

const dragListData = [
  {
    id: 'row-1',
    value: 'Hello'
  },
  {
    id: 'row-2',
    value: 'Welcome',
    draggable: false,
  }
];

NOTE: draggable: true(default)/false key can be used for enable/disable the option from drag and drop.

 <ListDragDrop
    containerId='colDrag'
    containerClass='colDragCustomClass'
    options={dragListData}
    onDragStartCallback={}
    onDragOverCallback={}
    onDragEndCallback={}
  />

For more detail, please have a look at the code, here
https://github.com/naukri-engineering/listdragdrop

Further interested to see the magic it does? Here is a demo for you.
Click Here!!