How to Build Drag-and-Drop Components With React DnD
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:08] Add, drag and drop. Install React D&D. To implement drag and drop, we'll use the React D&D library. This library has several adapters called backends to support different APIs.
[00:09 - 00:49] For example, to use React D&D with HTML5, we'll use React D&D HTML5 backend. Install the library, yarn, add, react, dnd, I'll use version 14, 0, 1, and also install the React D&D HTML5 backend. React, dnd, HTML5, backend, 14, 0, 0. React D&D has built-in type definitions, so we don't have to install them separately. Open a CIRC index.jsx and drop the app into the D&D provider. You 'll need to pass the backend. Import it from the React D&D HTML5 backend, HTML5 backend, as backend from React D&D, HTML5 backend, pass it to D&D provider, and we're done. Let's also define the type for dragging.
[00:50 - 01:13] When we begin to drag an item, we'll provide information about it to react D&D. We'll pass an object that will describe the item we're currently dragging. This object will have a type field that for now will be a column, and we'll also pass the columns AD and text that we get from the column component. Create a new file, SRC, drag, item, T.S. Here define an expert type, column, drag, item, it will contain ID, string, text, string, and type, column.
[01:14 - 01:25] Define an expert, type drag, item, that for now is going to be just column, drag, item, alias, but later, will make it a union type between column drag item and card drag item.