Skip to content
@arshad-shah/detent

Getting started

Install

Section titled “Install”
Terminal window
npm install @arshad-shah/detent

The stylesheet

Section titled “The stylesheet”
import '@arshad-shah/detent/styles.css';

Required for resize handles, which get their size from it. Dragging, sorting and keyboard reordering all work without it — see Styling.

The three entry points

Section titled “The three entry points”

Each takes an element and options, and returns a handle with destroy().

import { draggable, sortable, resizable } from '@arshad-shah/detent';


// Move an element, kept inside its parent.
draggable(box, { bounds: 'parent' });


// Reorder a list.
sortable(list, {
  animation: 180,
  onSort({ item, from, to }) {
    console.log(`moved ${from.index} -> ${to.index}`);
  },
});


// Resize an element from any edge or corner.
resizable(panel, { minWidth: 120, aspectRatio: 16 / 9 });

Always call destroy() when the element goes away:

const handle = draggable(box);
// later
handle.destroy();

The framework wrappers do this for you.

Frameworks

Section titled “Frameworks”

If you are using React, Svelte, or anything that speaks HTML, there is a wrapper that handles binding and teardown:

  • React — hooks returning a callback ref
  • Svelte — use: actions
  • Web Components — custom elements, no peers, works in Angular, Vue, Astro and plain HTML
Section titled “What to read next”