React DnD Multi-Backend

9.0.0 · active · verified Tue Apr 21

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.

Common errors

```
Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-dnd-multi-backend/dist/index.js from ... not supported.
```
cause Attempting to use `require()` to import `react-dnd-multi-backend` in a CommonJS environment after v8.0.0.

fix Change `const MultiBackend = require('react-dnd-multi-backend');` to `import MultiBackend from 'react-dnd-multi-backend';`. Ensure your project uses ES Modules or is properly transpiled.
```
Module not found: Error: Can't resolve 'dnd-core'
```
cause Missing explicit `dnd-core` installation after v8.0.2 due to changes in dependency resolution.

fix Install `dnd-core` as a direct dependency: `npm install dnd-core` or `yarn add dnd-core`.
```
Invalid hook call. Hooks can only be called inside of the body of a function component.
```
cause Often indicates multiple versions of React being loaded, or a mismatch in peer dependencies with `react-dnd` or `dnd-core`.

fix Check for duplicate React installations (`npm ls react` or `yarn why react`). Ensure `react`, `react-dom`, `dnd-core`, and `react-dnd` peer dependencies are met and their versions are compatible.
```
TypeError: (0, react_dnd_multi_backend__WEBPACK_IMPORTED_MODULE_2__.HTML5ToTouch) is not a function
```
cause This usually happens if `HTML5ToTouch` is imported as a default export instead of a named export.

fix Ensure `HTML5ToTouch` is imported as a named export: `import { HTML5ToTouch } from 'react-dnd-multi-backend';`

Warnings

breaking Version 8.0.0 dropped support for CommonJS and UMD builds. The library is now ESM-only.
Fix: Update your project to use ES Modules (e.g., `import` syntax). If using Node.js, ensure your project is configured for ESM or use a bundler that transpiles ESM for older environments.
breaking Version 8.0.0 dropped support for Node.js 14. Projects requiring Node 14 will need to remain on a prior major version.
Fix: Upgrade your Node.js environment to a supported version (e.g., Node.js 16 or higher).
gotcha Since version 8.0.2, `dnd-core` might need to be explicitly added to your project's `dependencies` field, even though it's a peer dependency.
Fix: Run `npm install dnd-core` or `yarn add dnd-core` in your project.
breaking Version 9.0.0 added support for React v19, which required updating the `react` and `react-dom` peer dependencies. While no direct API changes in `react-dnd-multi-backend` were introduced, this is a breaking change for projects not yet ready for React 19.
Fix: Ensure your project's `react` and `react-dom` versions satisfy the peer dependency requirements of `^16.14.0 || ^17.0.2 || ^18.0.0 || ^19.0.0`.

Install

npm install react-dnd-multi-backend npm
yarn add react-dnd-multi-backend yarn
pnpm add react-dnd-multi-backend pnpm

Imports

MultiBackend
wrong:
```
const MultiBackend = require('react-dnd-multi-backend');
```
correct:
```
import MultiBackend from 'react-dnd-multi-backend';
```
The library transitioned to ESM-only builds in v8.0.0. CommonJS `require` statements will fail.
HTML5ToTouch
wrong:
```
import HTML5ToTouch from 'react-dnd-multi-backend/lib/HTML5ToTouch';
```
correct:
```
import { HTML5ToTouch } from 'react-dnd-multi-backend';
```
Commonly used preset backend. Ensure you also install `react-dnd-html5-backend` and `react-dnd-touch-backend`.
DndProvider
wrong:
```
import { DndProvider } from 'react-dnd-multi-backend';
```
correct:
```
import { DndProvider } from 'react-dnd';
```
While used with `MultiBackend`, `DndProvider` is exported from the core `react-dnd` package.

Quickstart

Demonstrates setting up `DndProvider` with `MultiBackend` and `HTML5ToTouch` for combined HTML5 and touch support.

import React from 'react';
import { DndProvider } from 'react-dnd';
import MultiBackend, { HTML5ToTouch } from 'react-dnd-multi-backend';
import { TouchBackend } from 'react-dnd-touch-backend';
import { HTML5Backend } from 'react-dnd-html5-backend';

interface MyDraggableProps {
  name: string;
}

const MyDraggable: React.FC<MyDraggableProps> = ({ name }) => {
  // In a real app, use useDrag hook here
  return (
    <div style={{ padding: '10px', margin: '5px', border: '1px solid gray' }}>
      {name}
    </div>
  );
};

const App: React.FC = () => {
  const options = {
    backends: [
      { backend: HTML5Backend },
      { backend: TouchBackend, options: { enableMouseEvents: true } },
    ],
  };

  return (
    <DndProvider backend={MultiBackend} options={options}>
      <h1>Drag and Drop with Multi-Backend</h1>
      <p>Try dragging these elements with mouse or touch.</p>
      <MyDraggable name="Item 1" />
      <MyDraggable name="Item 2" />
    </DndProvider>
  );
};

export default App;

view raw JSON →