Security News
Internet Archive Hacked, 31 Million Record Compromised
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
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
We strive to support the evergreen browsers.
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
FAQs
HTML5 backend for React DnD
The npm package react-dnd-html5-backend receives a total of 1,754,104 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
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.