​
Overview

Plugins are a powerful way to extend the core functionality of @dnd-kit. They can be used to add new features, modify existing behavior, or react to drag and drop operations.

​
Built-in Plugins

Several plugins are included by default:
  • Accessibility: Manages ARIA attributes for drag and drop operations
  • AutoScroller: Automatically scrolls containers when dragging near edges
  • Cursor: Updates cursor styles during drag operations
  • Feedback: Manages visual feedback during dragging
  • PreventSelection: Prevents text selection while dragging
  • ScrollListener: Tracks scroll events during drag operations
  • Scroller: Handles programmatic scrolling

​
Creating a Plugin

To create a custom plugin, extend the Plugin class: 
import {Plugin} from '@dnd-kit/abstract';

interface MyPluginOptions {
  delay?: number;
}

class MyPlugin extends Plugin {
  constructor(manager, options?: MyPluginOptions) {
    super(manager, options);

    // Register effects that will be cleaned up automatically
    this.registerEffect(() => {
      const {monitor} = this.manager;

      // Listen for drag events
      const cleanup = monitor.addEventListener('dragstart', (event) => {
        console.log('Drag started:', event.operation.source.id);
      });

      // Return cleanup function
      return cleanup;
    });
  }

  // Optional: Add custom methods
  public customMethod() {
    if (this.disabled) return;
    // Custom functionality
  }
}

​
Using Plugins

Plugins can be added when creating a DragDropManager: 
import {DragDropManager} from '@dnd-kit/dom';

const manager = new DragDropManager({
  plugins: [
    MyPlugin.configure({ delay: 500 }),
    AutoScroller,
  ]
});

​
Plugin Lifecycle

  1. Construction: Plugin instance created with manager reference
  2. Configuration: Options applied if provided
  3. Registration: Plugin registered with manager
  4. Operation: Plugin effects are run
  5. Cleanup: Plugin destroyed when manager is destroyed

​
API Reference

​
Plugin Class

The base class for all plugins:
​
manager
DragDropManager
required
Reference to the drag and drop manager instance.
​
options
PluginOptions
Optional configuration options for the plugin.

​
Properties

  • disabled: Whether the plugin is currently disabled
  • options: Current plugin options

​
Methods

  • enable(): Enable the plugin
  • disable(): Disable the plugin
  • isDisabled(): Check if plugin is disabled
  • configure(options): Update plugin options
  • destroy(): Clean up plugin resources
  • registerEffect(callback): Register a reactive effect

​
Static Methods

  • configure(options): Create a configured plugin descriptor
// Example using static configure
const configuredPlugin = MyPlugin.configure({
  delay: 500
});

const manager = new DragDropManager({
  plugins: [configuredPlugin]
});

​
Plugin Options

Options passed to plugins should be plain objects: 
interface PluginOptions {
  [key: string]: any;
}

​
Effects

Plugins can register effects that automatically clean up: 
class MyPlugin extends Plugin {
  constructor(manager) {
    super(manager);

    // Effect will be cleaned up when plugin is destroyed
    this.registerEffect(() => {
      const interval = setInterval(() => {
        // Do something periodically
      }, 100);

      return () => clearInterval(interval);
    });
  }
}

​
Best Practices

  1. Clean Up Resources: Always clean up listeners and timers in the destroy method
  2. Check Disabled State: Check this.disabled before performing operations
  3. Use Type Safety: Leverage TypeScript for better type checking
  4. Document Options: Clearly document all available options
  5. Follow Patterns: Study built-in plugins for patterns and conventions