react-dnd-html5-backend
Advanced tools
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.
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>
);
}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 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 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.
The officially supported HTML5 backend for React DnD. See the docs for usage information.
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 unpkg to access the UMD build directly: ReactDnDHTML5Backend.min.js. You may point your Bower config to it.
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 officially 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.
MIT
<small>11.1.1 (2020-05-26)</small>
getManager() method (#1570) (4ad004c), closes #1570FAQs
HTML5 backend for React DnD
The npm package react-dnd-html5-backend receives a total of 1,865,566 weekly downloads. As such, react-dnd-html5-backend popularity was classified as popular.
We found that react-dnd-html5-backend demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.