Drag Selectable

A React component system that enables drag selection over a vertical list of items with toggle-based multi-select behavior.

Live Example

Try the drag selection below:

• Normal drag: Toggle selection
• Ctrl/Cmd + drag: Replace selection
• Escape: Clear all selections

import React from 'react';
import { Card, Badge, useDragSelect } from '@vuer-ai/vuer-uikit';

const TODOS = [
  { key: "1", title: "Learn React hooks" },
  { key: "2", title: "Build a todo app" },
  { key: "3", title: "Implement drag selection" },
  // ... more items
];

export default function DragSelectExample() {
  const { selectedItems, getItemProps, clearSelection } = useDragSelect();

  return (
    <div>
      <button onClick={clearSelection}>
        Clear ({selectedItems.size} selected)
      </button>
      
      {TODOS.map(todo => (
        <TodoItem
          key={todo.key}
          title={todo.title}
          checked={selectedItems.has(todo.key)}
          {...getItemProps(todo.key)}
        />
      ))}
    </div>
  );
}

Simple API

The useDragSelect() hook provides everything you need for drag selection:

Returns:

• selectedItems: Set<string> - Currently selected item IDs
• getItemProps(id: string) - Props to spread on selectable items
• clearSelection() - Function to clear all selections
• isSelected(id: string) - Check if item is selected

Usage: Just import the hook, call it, and spread getItemProps(id) on your items. The hook handles all the complex state management, event handling, and keyboard shortcuts automatically.

Features

• Automatic Event Handling - Mouse and keyboard events handled internally
• Modifier Key Support - Ctrl/Cmd for replace mode, default toggle mode
• Global Events - Mouse up and Escape key work anywhere on page
• TypeScript Support - Fully typed hook and props
• Zero Dependencies - Pure React implementation

Selection Modes

• Toggle (default): Items flip their selection state during drag
• Replace (Ctrl/Cmd + drag): Clear existing selection, start new selection range

Accessibility

• Semantic HTML structure
• Keyboard navigation support
• Screen reader friendly markup
• Clear visual feedback for selection states