draggable
Move an element with the pointer. Axis locking, bounds, grid snapping. Read more
Drag, reorder, resize
6.7 KB gzipped, no dependencies, and one input path for mouse, touch and pen.
- first
- second
- third
sortable
Reorder a list, or pass items between several. Keyboard reordering with screen-reader announcements. Read more
resizable
Eight handles or your own elements. Aspect ratio, grid, bounds. Read more
Install
Section titled “Install”npm install @arshad-shah/detentnpm install @arshad-shah/detent @arshad-shah/detent-reactnpm install @arshad-shah/detent @arshad-shah/detent-sveltenpm install @arshad-shah/detent @arshad-shah/detent-elementsWhat it costs
Section titled “What it costs”| Bundle | Gzipped |
|---|---|
draggable only |
2.4 KB |
resizable only |
3.1 KB |
sortable only |
4.6 KB |
| all three | 6.7 KB |
Every rectangle is read once at the start of a drag and cached, so nothing reads layout during a move. DOM writes are batched to one per frame. Reorders use FLIP, so the browser lays the list out a single time no matter how many items shuffle.
Per-swap cost grows with the number of items, not their size: fine at 20,
noticeable around 200. Set animation: 0 or virtualise above that.
A detent is the catch that holds a moving part at a set position — the click you feel when a dial lands on a setting.