Skip to main content

​
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 when creating a new DragDropManager:

Accessibility

Manages ARIA attributes and screen reader announcements for drag and drop operations.

AutoScroller

Automatically scrolls containers when dragging near edges.

Cursor

Updates cursor styles during drag operations.

Debug

Visualize drag shapes, droppable zones, and collisions for debugging.

Feedback

Manages visual feedback during dragging, including top layer promotion and drop animations.

StyleInjector

Centralized style injection with CSP nonce support.

​
Using Plugins

The plugins option accepts either an array or a function that receives the default plugins.

​
Extending defaults

Use the function form to add plugins to the defaults or configure existing ones, without replacing them: 
import {DragDropManager} from '@dnd-kit/dom';

const manager = new DragDropManager({
  plugins: (defaults) => [...defaults, MyPlugin],
});

import {DragDropManager, Feedback} from '@dnd-kit/dom';

const manager = new DragDropManager({
  plugins: (defaults) => [
    ...defaults,
    Feedback.configure({ dropAnimation: null }),
  ],
});

​
Replacing defaults

Pass an array to fully replace the default plugins: 
const manager = new DragDropManager({
  plugins: [
    MyPlugin.configure({ delay: 500 }),
    AutoScroller,
  ]
});

​
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);

    this.registerEffect(() => {
      const {monitor} = this.manager;

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

      return cleanup;
    });
  }

  public customMethod() {
    if (this.disabled) return;
    // Custom functionality
  }
}

​
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
const configuredPlugin = MyPlugin.configure({
  delay: 500
});

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

​
Effects

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

    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