Plugins

Extend beyond the core functionality with 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 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.

Feedback

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

StyleInjector

Centralized style injection with CSP nonce support.

Other plugins are available but need to be opted into:

Debug

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

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