react-dnd-html5-backend

What is react-dnd-html5-backend?

The react-dnd-html5-backend package is a backend implementation for react-dnd (React Drag and Drop) that uses the HTML5 drag and drop API. It enables you to implement drag and drop functionalities in your React applications using the native HTML5 API.

What are react-dnd-html5-backend's main functionalities?

Drag Source

This code sample demonstrates how to create a draggable component using the useDrag hook from react-dnd. The component becomes a drag source that can be dragged around the screen.

import { useDrag } from 'react-dnd';

function DraggableComponent() {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'BOX',
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      Draggable Content
    </div>
  );
}

Drop Target

This code sample shows how to create a drop target using the useDrop hook from react-dnd. The component can accept draggable items and provides visual feedback when an item is dragged over it.

import { useDrop } from 'react-dnd';

function DroppableComponent() {
  const [{ canDrop, isOver }, drop] = useDrop(() => ({
    accept: 'BOX',
    drop: () => ({ name: 'DroppableComponent' }),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  }));

  return (
    <div ref={drop} style={{ backgroundColor: isOver ? 'green' : 'white' }}>
      {canDrop ? 'Release to drop' : 'Drag a box here'}
    </div>
  );
}

Custom Drag Layer

This code sample illustrates how to use a custom drag layer to render a custom preview of the draggable item. The useDragLayer hook provides the necessary state to render the preview at the correct position.

import { useDragLayer } from 'react-dnd';

function CustomDragLayer() {
  const { isDragging, item, currentOffset } = useDragLayer((monitor) => ({
    item: monitor.getItem(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging(),
  }));

  if (!isDragging) {
    return null;
  }

  return (
    <div style={{ position: 'fixed', pointerEvents: 'none', left: currentOffset.x, top: currentOffset.y }}>
      Custom Drag Layer Content
    </div>
  );
}

Other packages similar to react-dnd-html5-backend

react-beautiful-dnd

react-beautiful-dnd is a higher-level abstraction built on top of the drag and drop API. It provides a more opinionated but user-friendly way to implement drag and drop with smooth animations and accessibility features. Unlike react-dnd-html5-backend, it does not require a separate backend package to work.

dnd-kit

dnd-kit is a modern drag and drop toolkit for React that is built with hooks. It offers a more flexible API and better touch support compared to react-dnd-html5-backend. It also includes features like sortable lists and multiple items dragging out of the box.

react-sortable-hoc

react-sortable-hoc is a set of higher-order components to turn any list into an animated, touch-friendly, sortable list. It's more focused on sorting capabilities and less on general drag and drop scenarios compared to react-dnd-html5-backend.

README

React DnD HTML5 Backend

The officially supported HTML5 backend for React DnD.
See the docs for usage information.

Installation

If you use npm:

npm install --save react-dnd-html5-backend

The npm package defaults to the CommonJS build.

However it also includes a pre-minified UMD build in the dist folder. The UMD build exports a global window.ReactDnDHTML5Backend when imported as a <script> tag.

If you’d rather not use npm, you can use npmcdn to access the UMD build directly: ReactDnDHTML5Backend.min.js.
You may point your Bower config to it.

Browser Support

We strive to support the evergreen browsers, Safari 7+, as well as IE11+. IE10 should also work, but DragLayer is fairly useless because IE10 doesn’t support pointer-events: none. We don’t officialy support IE9 and less.

Unfortunately the browser bugs, inconsistencies, and regressions come up from time to time, so please make sure you test your app on the browsers you’re interested in, and report any bugs to us.

License

MIT

Changelog

2.1.0 (2016-02-14)

• 2.0.1 (97c82ee)
• 2.0.2 (017ce3e)
• 2.1.0 (88cdf84)
• Add .travis.yml (ed92dea)
• Add badges (874a56e)
• Add index to Card propTypes (306ae30)
• Add linting as a build step (1d83221)
• build both dev and minified versions to dist (cb1e699)
• Bump deps (d653066)
• Clarify the mutation (559f8ff)
• Delete unexpected comma. (4b3a586)
• Don't allow to call connect* methods on the composite component elements (96d4c30)
• Don't throw on undefined options when nodes are equal (faded79), closes #261
• Don't throw when options changed from falsy to object (b33c941), closes #261
• DragLayer should not call setState() after being unmounted (1e6f3e3), closes #307
• Exclude testing from Travis (5e67908)
• Extract HTML5 backend into a separate repo and update docs with examples (f37dc94)
• Fix broken link in example. (9e978ac)
• Fix DragLayer ES5 documentation example. (7043fcc)
• Fix lint (7fb9ea5)
• Fix localhost-link (93761e9)
• Fix syntax error in Testing.md (bca8f7d)
• Fix test runner (b6381a6)
• Fix typo (94cd292)
• Handlers should not call setState() after being unmounted (related to #307) (237ba41), closes #307
• Improved docs (consistent naming, improved performance) (ee1a23d)
• Remove Karma test from Travis (92fe1d2)
• Revert "Subscribe DragLayer only to state changes, which include offset changes" (0f94199)
• Subscribe DragLayers to state change (503869e)
• Travis is no fun (c43b492)
• Update dependencies and remove deprecated publish-latest (f6cf8f3)
• Update dnd-core to fix #296 (52d5ad0), closes #296
• update lodash to v4 (2f97cda)
• Update UMD location (5e358e1)
• Use IO2 for Travis (07d2281)
• fix(docs): update examples to use findDOMNode from react-dom (de29f65)