82 lines
2.4 KiB
Markdown
82 lines
2.4 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. 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 (
|
|
<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 |