tessl/npm-react-dnd

Drag and Drop for React applications with hooks-based API and TypeScript support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Context and Provider

Name: tessl/npm-react-dnd
Author: tessl

Core context and provider components for setting up React DnD in your application. The DndProvider must wrap any components that use React DnD hooks.

Capabilities

DndProvider

The main provider component that enables React DnD functionality throughout your component tree.

/**
 * A React component that provides the React-DnD context
 * @param props - Provider configuration with backend or manager
 * @returns React element wrapping children with DnD context  
 */
function DndProvider<BackendContext, BackendOptions>(
  props: DndProviderProps<BackendContext, BackendOptions>
): React.ReactElement;

type DndProviderProps<BackendContext, BackendOptions> =
  | {
      children?: React.ReactNode;
      manager: DragDropManager;
    }
  | {
      backend: BackendFactory;
      children?: React.ReactNode;
      context?: BackendContext;
      options?: BackendOptions;
      debugMode?: boolean;
    };

Usage Examples:

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

// Basic usage with HTML5 backend
function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <MyDragDropComponents />
    </DndProvider>
  );
}

// With custom options
function AppWithOptions() {
  return (
    <DndProvider 
      backend={HTML5Backend} 
      options={{ enableMouseEvents: true }}
      debugMode={process.env.NODE_ENV === 'development'}
    >
      <MyDragDropComponents />
    </DndProvider>
  );
}

// With custom manager (advanced usage)
import { createDragDropManager } from "dnd-core";

function AppWithCustomManager() {
  const manager = createDragDropManager(HTML5Backend);
  
  return (
    <DndProvider manager={manager}>
      <MyDragDropComponents />
    </DndProvider>
  );
}

DndContext

The React context that provides access to the DragDropManager instance.

/**
 * The React context type for drag and drop functionality
 */
interface DndContextType {
  dragDropManager: DragDropManager | undefined;
}

/**
 * React Context for accessing the drag drop manager
 */
const DndContext: React.Context<DndContextType>;

Usage Example:

import React, { useContext } from "react";
import { DndContext } from "react-dnd";

function MyComponent() {
  const { dragDropManager } = useContext(DndContext);
  
  // Advanced usage - typically not needed for normal usage
  if (dragDropManager) {
    const monitor = dragDropManager.getMonitor();
    // ... advanced monitor operations
  }
  
  return <div>My Component</div>;
}

useDragDropManager

Low-level hook for accessing the DragDropManager instance directly.

/**
 * A hook to retrieve the DragDropManager from Context
 * @returns DragDropManager instance
 * @throws Error if used outside DndProvider
 */
function useDragDropManager(): DragDropManager;

Usage Example:

import React from "react";
import { useDragDropManager } from "react-dnd";

function AdvancedComponent() {
  const manager = useDragDropManager();
  const monitor = manager.getMonitor();
  
  // Advanced monitoring capabilities
  React.useEffect(() => {
    const unsubscribe = monitor.subscribeToStateChange(() => {
      console.log("Drag state changed");
    });
    
    return unsubscribe;
  }, [monitor]);
  
  return <div>Advanced DnD Component</div>;
}

Backend Integration

React DnD uses a pluggable backend system. Common backends include (note: these are separate npm packages):

HTML5Backend: For desktop browsers with native HTML5 drag and drop (from react-dnd-html5-backend)
TouchBackend: For mobile devices with touch interactions (from react-dnd-touch-backend)
TestBackend: For testing environments (from react-dnd-test-backend)

// Note: These are separate packages that need to be installed
import { HTML5Backend } from "react-dnd-html5-backend";
import { TouchBackend } from "react-dnd-touch-backend";
import { TestBackend } from "react-dnd-test-backend";

// Choose backend based on environment
const backend = typeof window !== 'undefined' && 'ontouchstart' in window 
  ? TouchBackend 
  : HTML5Backend;

function App() {
  return (
    <DndProvider backend={backend}>
      <MyApp />
    </DndProvider>
  );
}

Install with Tessl CLI