kali-dnd
v0.0.6
Published
creating a simple drag and drop without more complex.
Downloads
25
Maintainers
Readme
What is this?
It is simple drag and drop component for react application
Installation
npm i kali-dnd
or yarn add kali-dnd
Then...
import React, { useEffect, useRef, useState } from 'react';
import dragAndDrop from 'kali-dnd';
function App() {
let dropZone = useRef();
const [divStyles, setDivStyles] = useState({ background: "lightgreen" })
const handleDragEnter = (e) => {
e.preventDefault();
setDivStyles({ background: "tomato" })
}
const handleDragOver = (e) => {
e.preventDefault()
e.stopPropagation()
}
const handleDrop = (e) => {
e.preventDefault()
e.stopPropagation();
setDivStyles({ background: "lightgreen" })
}
const handleDragLeave = (e) => {
e.preventDefault()
e.stopPropagation()
setDivStyles({ background: "lightgreen" })
}
useEffect(() => {
dragAndDrop({ drop: dropZone, handleDragOver, handleDrop, handleDragEnter, handleDragLeave })
}, [])
return (
<div ref={dropZone} style={{ width: '800px', height: '500px', ...divStyles }} >
</div>
)
}
export default App
Instructions
- Install the package using
npm install kali-dnd
oryarn add kali-dnd
.
- Import it into your project and use as shown in example above.
- You can pass any of these props to customize the behaviour of dnd:
- dropZone ref is mandatory to initialize the div element
- handleDragEnter - function that will be called when dragging starts inside a droppable area;
- handleDragOver - function that will be called when user drags over a droppable area;
- handleDrop - function that will be called on dropping an element onto another one;
- handleDragLeave - function that will be called when leaving a droppable area while dragging is active.