2.4 KiB
- Home
- Components
- Drag Selectable
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
0 item s selected Clear All Learn React hooks Build a todo app Implement drag selection Style with Tailwind CSS Add dark mode support Write unit tests Deploy to production Add keyboard shortcuts Improve accessibility Add animations ```tsx 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 (
{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