{"library":"react-dnd-html5-backend","title":"React DnD HTML5 Backend","description":"react-dnd-html5-backend provides an essential implementation for drag-and-drop functionality within the React DnD ecosystem, leveraging the native HTML5 Drag and Drop API. This backend handles the intricacies of browser-specific drag and drop events and interactions, abstracting them into React DnD's unified API for consistent use across applications. The current stable version is 16.0.1, and the package actively aligns with the release cadence of the core react-dnd library. Its key differentiator lies in its robust reliance on the browser's built-in HTML5 drag-and-drop capabilities, offering a performant and widely supported solution. Recent major updates, notably in versions 15 and 16, have focused on migrating to ESM-only modules, deprecating the older Decorators API in favor of a Hooks-based approach, and improving compatibility with modern JavaScript environments and Node.js runtimes.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-dnd-html5-backend"],"cli":null},"imports":["import { HTML5Backend } from 'react-dnd-html5-backend'","import { DndProvider } from 'react-dnd'","import type { BackendFactory } from 'react-dnd'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { HTML5Backend } from 'react-dnd-html5-backend';\nimport { DndProvider, useDrag, useDrop } from 'react-dnd';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst ItemTypes = {\n  CARD: 'card'\n};\n\ninterface CardProps {\n  id: number;\n  text: string;\n  moveCard: (id: number, to: number) => void;\n  index: number;\n}\n\nconst Card: React.FC<CardProps> = ({ id, text, moveCard, index }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  const [, drop] = useDrop<CardProps, unknown, unknown>({\n    accept: ItemTypes.CARD,\n    hover(item, monitor) {\n      if (!ref.current) {\n        return;\n      }\n      const dragIndex = item.index;\n      const hoverIndex = index;\n      if (dragIndex === hoverIndex) {\n        return;\n      }\n      const hoverBoundingRect = ref.current?.getBoundingClientRect();\n      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n      const hoverClientY = clientOffset!.y - hoverBoundingRect.top;\n\n      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {\n        return;\n      }\n      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {\n        return;\n      }\n      moveCard(item.id, hoverIndex);\n      item.index = hoverIndex;\n    }\n  });\n\n  const [{ isDragging }, drag] = useDrag({\n    type: ItemTypes.CARD,\n    item: { id, index, text },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging()\n    })\n  });\n\n  drag(drop(ref));\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        border: '1px dashed gray',\n        padding: '0.5rem 1rem',\n        marginBottom: '.5rem',\n        backgroundColor: 'white',\n        cursor: 'move',\n        opacity: isDragging ? 0.4 : 1\n      }}\n    >\n      {text}\n    </div>\n  );\n};\n\nconst Container: React.FC = () => {\n  const [cards, setCards] = React.useState([\n    { id: 1, text: 'Write a cool JS library' },\n    { id: 2, text: 'Make it generic enough' },\n    { id: 3, text: 'Write some docs' },\n    { id: 4, text: 'Profit' }\n  ]);\n\n  const moveCard = React.useCallback((id: number, to: number) => {\n    const dragIndex = cards.findIndex(card => card.id === id);\n    const dragCard = cards[dragIndex];\n    const newCards = [...cards];\n    newCards.splice(dragIndex, 1);\n    newCards.splice(to, 0, dragCard);\n    setCards(newCards);\n  }, [cards]);\n\n  return (\n    <div>\n      {cards.map((card, i) => (\n        <Card key={card.id} id={card.id} text={card.text} index={i} moveCard={moveCard} />\n      ))}\n    </div>\n  );\n};\n\nReactDOM.render(\n  <DndProvider backend={HTML5Backend}>\n    <Container />\n  </DndProvider>,\n  document.getElementById('root')\n);\n","lang":"typescript","description":"This quickstart demonstrates a basic sortable list using React DnD with the HTML5 Backend, showcasing DndProvider, useDrag, and useDrop hooks to enable drag-and-drop reordering of cards.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}