CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-dnd-html5-backend

HTML5 drag and drop backend for React DnD, enabling sophisticated drag-and-drop interactions using the native HTML5 Drag and Drop API

—

Pending
Overview
Eval results
Files

React DnD HTML5 Backend

The React DnD HTML5 Backend provides the HTML5 drag and drop implementation for React DnD, enabling web applications to implement sophisticated drag-and-drop interactions using the native HTML5 Drag and Drop API. It serves as the core backend that handles browser-specific drag and drop events, manages drop zones and drag sources, and provides utilities for drag preview customization.

Package Information

  • Package Name: react-dnd-html5-backend
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-dnd-html5-backend

Core Imports

import { HTML5Backend, getEmptyImage, NativeTypes } from "react-dnd-html5-backend";
import type { HTML5BackendOptions, HTML5BackendContext } from "react-dnd-html5-backend";

For CommonJS:

const { HTML5Backend, getEmptyImage, NativeTypes } = require("react-dnd-html5-backend");

Basic Usage

import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

// Basic setup with default options
function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      {/* Your drag and drop components */}
    </DndProvider>
  );
}

// With custom options
const backendOptions = {
  rootElement: document.getElementById("drag-drop-container")
};

function AppWithOptions() {
  return (
    <DndProvider backend={HTML5Backend} options={backendOptions}>
      {/* Your drag and drop components */}
    </DndProvider>
  );
}

Architecture

The HTML5 Backend is built around several key components:

  • Backend Factory: The HTML5Backend function creates backend instances configured for React DnD
  • Backend Implementation: HTML5BackendImpl class handles all drag/drop event management and DOM interactions
  • Native Type Support: Built-in support for files, URLs, text, and HTML drag sources through NativeTypes
  • Drag Preview Utilities: Empty image creation for custom drag preview implementations
  • Event Management: Comprehensive event listener lifecycle management with cleanup

Capabilities

Backend Factory

Core factory function for creating HTML5 drag and drop backend instances that integrate with React DnD.

const HTML5Backend: BackendFactory = function createBackend(
  manager: DragDropManager,
  context?: HTML5BackendContext,
  options?: HTML5BackendOptions,
): HTML5BackendImpl;

type HTML5BackendContext = Window | undefined;

interface HTML5BackendOptions {
  /** The root DOM node to use for subscribing to events. Default=Window */
  rootElement: Node;
}

Backend Factory

Native Drag Sources

Built-in support for native HTML5 drag source types including files, URLs, text, and HTML content.

namespace NativeTypes {
  const FILE: "__NATIVE_FILE__";
  const URL: "__NATIVE_URL__";
  const TEXT: "__NATIVE_TEXT__";
  const HTML: "__NATIVE_HTML__";
}

Native Drag Sources

Drag Preview Utilities

Utilities for customizing drag preview behavior, including empty image creation for custom drag previews.

function getEmptyImage(): HTMLImageElement;

Drag Preview Utilities

Core Types

interface Backend {
  setup(): void;
  teardown(): void;
  connectDragSource(sourceId: string, node: Element, options: any): Unsubscribe;
  connectDragPreview(sourceId: string, node: Element, options: any): Unsubscribe;
  connectDropTarget(targetId: string, node: HTMLElement): Unsubscribe;
  profile(): Record<string, number>;
}

type BackendFactory = (
  manager: DragDropManager,
  context?: any,
  options?: any
) => Backend;

type Unsubscribe = () => void;

Install with Tessl CLI

npx tessl i tessl/npm-react-dnd-html5-backend
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-dnd-html5-backend@16.0.x
Publish Source
CLI
Badge
tessl/npm-react-dnd-html5-backend badge