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

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

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

docs

backend-factory.md

drag-preview-utils.md

index.md

native-drag-sources.md

tile.json