{"library":"react-dnd","title":"React DnD","description":"React DnD is a JavaScript library designed to help you build complex drag and drop interfaces for React applications. It provides a flexible, declarative API that abstracts away the complexities of the native HTML5 Drag and Drop API, offering a backend-agnostic architecture that supports various interaction models (e.g., HTML5, Touch). The current stable version is 16.0.1, with recent major releases (v15 and v16) emphasizing a shift towards a hooks-based API and an ESM-only distribution. React DnD aims for a decoupled approach, allowing developers to define drag sources and drop targets independently, making it a robust choice for intricate drag-and-drop functionalities.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-dnd"],"cli":null},"imports":["import { DndProvider } from 'react-dnd'","import { useDrag } from 'react-dnd'","import { useDrop } from 'react-dnd'","import { HTML5Backend } from 'react-dnd-html5-backend'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { DndProvider, useDrag, useDrop } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\n\n// Define item types for drag and drop\nconst ItemTypes = {\n  BOX: 'box',\n};\n\n// Draggable component\nconst DraggableBox: React.FC<{ name: string }> = ({ name }) => {\n  const [{ isDragging }, drag] = useDrag(() => ({\n    type: ItemTypes.BOX,\n    item: { name },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n  }));\n\n  return (\n    <div\n      ref={drag}\n      style={{\n        opacity: isDragging ? 0.5 : 1,\n        cursor: 'move',\n        padding: '8px',\n        border: '1px dashed gray',\n        backgroundColor: 'white',\n        marginBottom: '4px',\n      }}\n    >\n      {name}\n    </div>\n  );\n};\n\n// Drop target component\nconst DropTargetBox: React.FC = () => {\n  const [droppedItems, setDroppedItems] = useState<string[]>([]);\n  const [{ isOver }, drop] = useDrop(() => ({\n    accept: ItemTypes.BOX,\n    drop: (item: { name: string }) => {\n      setDroppedItems((prev) => [...prev, item.name]);\n    },\n    collect: (monitor) => ({\n      isOver: monitor.isOver(),\n    }),\n  }));\n\n  const backgroundColor = isOver ? 'lightgreen' : '#eee';\n\n  return (\n    <div\n      ref={drop}\n      style={{\n        minHeight: '100px',\n        border: '1px solid black',\n        backgroundColor,\n        padding: '16px',\n        marginTop: '16px',\n      }}\n    >\n      {isOver ? 'Release to drop' : 'Drag items here'}\n      {droppedItems.length > 0 && (\n        <ul>\n          {droppedItems.map((item, index) => (\n            <li key={index}>{item}</li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\n// Main application component\nconst App: React.FC = () => {\n  return (\n    <DndProvider backend={HTML5Backend}>\n      <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>\n        <h1>React DnD Example</h1>\n        <p>Drag the boxes below into the drop target.</p>\n        <DraggableBox name=\"Item A\" />\n        <DraggableBox name=\"Item B\" />\n        <DropTargetBox />\n      </div>\n    </DndProvider>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates how to create a simple draggable box and a drop target using the `useDrag` and `useDrop` hooks within a `DndProvider`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}