Plugins

​

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:

​

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