{"library":"react-dnd-multi-backend","title":"React DnD Multi-Backend","description":"This library provides a multi-backend system compatible with React DnD, enabling applications to seamlessly switch between different drag-and-drop backends, such as HTML5 and Touch. It is currently at version 9.0.0, maintaining an active release cadence that often aligns with major React and `dnd-core` updates. A key differentiator is its ability to allow a single `DndProvider` to manage multiple backends simultaneously, simplifying the implementation of responsive drag-and-drop interfaces that need to work across various input methods (e.g., mouse for desktop, touch for mobile). The library facilitates a robust and flexible approach to handling diverse drag-and-drop interactions within React applications without extensive manual switching logic.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-dnd-multi-backend"],"cli":null},"imports":["import MultiBackend from 'react-dnd-multi-backend';","import { HTML5ToTouch } from 'react-dnd-multi-backend';","import { DndProvider } from 'react-dnd';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { DndProvider } from 'react-dnd';\nimport MultiBackend, { HTML5ToTouch } from 'react-dnd-multi-backend';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\ninterface MyDraggableProps {\n  name: string;\n}\n\nconst MyDraggable: React.FC<MyDraggableProps> = ({ name }) => {\n  // In a real app, use useDrag hook here\n  return (\n    <div style={{ padding: '10px', margin: '5px', border: '1px solid gray' }}>\n      {name}\n    </div>\n  );\n};\n\nconst App: React.FC = () => {\n  const options = {\n    backends: [\n      { backend: HTML5Backend },\n      { backend: TouchBackend, options: { enableMouseEvents: true } },\n    ],\n  };\n\n  return (\n    <DndProvider backend={MultiBackend} options={options}>\n      <h1>Drag and Drop with Multi-Backend</h1>\n      <p>Try dragging these elements with mouse or touch.</p>\n      <MyDraggable name=\"Item 1\" />\n      <MyDraggable name=\"Item 2\" />\n    </DndProvider>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"Demonstrates setting up `DndProvider` with `MultiBackend` and `HTML5ToTouch` for combined HTML5 and touch support.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}