#1 2020-08-25 12:52:23

Registered: 2020-08-22
Posts: 9

we set the moveCard prop for each of the Box component

This tutorial shows how to implement drag and drop using react-dnd.
The official tutorial is a bit long.
So, I created a simpler app to illustrate how to integrate react-dnd in your apps.
There is a github repository for this tutorial.
In this tutorial, we are going to draw three boxes and a card.
The app allows you to drag and drop the card into any of the three boxes.
Create react app    Create a new react app using    npx create-react-app dnd-demo    Add the following packages to your project.
yarn add react-dnd react-dnd-html5-backend    For web projects, we use react-dnd-html5-backend.
This does not have touch support.
For touch support, the package is react-dnd-touch-backend    Set DndProvider    The first step is to set the DndProvider.
DndProvider is a package that handles DOM events and translates it into internal Redux actions that react-dnd understands.
In index.js, import the following.
import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend";    Wrap the App component with the DndProvider.
ReactDOM.render(                       ,   document.getElementById("root") );    Minimal App Component     App component has three boxes and one card.
In App.js, .

Modify the App component like below

function App() {   return (                                  ); }     Both  Box and Card components are simple.
We don’t have to create separate files for it.

Include the following code in App.js
Function Card() {   return Card; }  function Box({ card }) {   return {card
: "Box"}; }    If Box has a card

it embeds the Card component.
Otherwise, it displays some text.

Add the following styles in App.css

.app {   display: flex;   margin: 20px; }  .box {   width: 300px;   height: 300px;   display: flex;   justify-content: center;   align-items: center;   background-color: rgba(0, 0, 0, 0.12);   border: 2px solid rgba(0, 0, 0, 0.24);   margin-right: 20px;   border-radius: 10px; }  .card {   width: 100%;   height: 100%;   display: flex;   justify-content: center;   align-items: center;   background-color: palegoldenrod;   border-radius: 10px; }    Add Drag Support    The next step is to add drag support to the card component.
Import useDrag hook from react-dnd.
import { useDrag } from "react-dnd";    Within card component, call the useDrag hook like so.
const [{ isDragging }, dragRef] = useDrag({     item: {       type: "card",     },     collect: (monitor) => ({       isDragging: monitor.isDragging(),     }),   });    The useDrag hook accepts an object with two props: item and collect.
Prop item specifies an item type.
In our example, we have only one draggable item type that we can name ‘card’.
Prop collect is more interesting.
It accepts a monitor object that indicates the current state of drag and drop.
In our example, we check if the card is being dragged.
We set that to the isDragging prop in our component.
Now, it is time to use the result of the hook within our card component.
return (            Card        );    We indicate that a component is draggable by specifying the ref property on the component.
Here we assign dragRef to the div component representing the card.
We also change the background color of the Card component when it is being dragged.
Add Drop Support    Next, .

We add drop support to the Box component
When the user drops a card to the Box

the card moves to that Box.
For implementing drop support, we use the useDrop hook.
Import { useDrag, .

UseDrop } from "react-dnd";    Call the useDrop hook from the Box component

const [{ isOver }, dropRef] = useDrop({     accept: "card",     drop: () => moveCard(),     collect: (monitor) => ({       isOver: !!monitor.isOver(),     }),   });    useDrop hook accepts an object with three props.
The first is an accept prop which specifies the item type that can be dropped into the box.
For our simple example, we accept the “card” item type that we specified earlier in the useDrag hook.
The second prop in useDrop hook is a drop function that gets triggered when an item is dropped.
For our example, .

We call the moveCard prop that we pass as prop to the Box component

The third prop in useDrop hook is the collect function.
Here, we check the state of the drag and drop action with the monitor object.
If the card is over the box, we set the isOver prop to true.

We use the result of the useDrop hook in the Box component as follows

return (            {card.

: "Box"}        );    Assign the ref prop to the box component

And change the background color if the card is over the box.
Finally, we make some changes to the App component to handle the drop action.
function App() {   const [index, setIndex] = useState(1);    function moveCard(i) {     setIndex(i);   }    return (                                  ); }    We have a new state – index which indicates the box index where the card is present.
Also, we set the moveCard prop for each of the Box component.
The moveCard function is very simple.

It sets the index of the Box which has the Card

With the following changes, we have implemented Drag and Drop support to our app.
Drag and Drop    The complete source code is available in the Git repo.
The post Drag and Drop using react-dnd appeared first on Vijay Thirugnanam.



Board footer

Powered by FluxBB