useDrag

Hook that orchestrates file drag-and-drop events over a container. Returns the isDragging state and a bundle of handlers ready to be spread onto a <div>.

Automatically filters files by the types accepted in accept (same format as the HTML accept attribute) and, optionally, limits to a single file via single.

When to use

✅ Use when…	🚫 Avoid when…
In uploaders/dropzones that accept files by dragging. In areas where the "dragging" visual feedback needs to be controlled.	For uploads without drag-and-drop (use `useFileDialog`). For drag-and-drop of UI elements (list reordering etc.) — use a specialized library.

Signature

const { isDragging, events } = useDrag({
  accept?: string[];
  single?: boolean;
  onDragOver?: () => void;
  onDragLeave?: () => void;
  onDrop?: (files: File[]) => void;
});

Example

import { useDrag } from '@apollion-dsi/core/hooks';
 
function Dropzone({ onDrop }: { onDrop: (files: File[]) => void }) {
  const { isDragging, events } = useDrag({
    accept: ['image/*', '.pdf'],
    onDrop,
  });
 
  return (
    <div
      {...events}
      style={{
        border: '2px dashed',
        borderColor: isDragging ? 'blue' : 'gray',
        padding: 24,
      }}
    >
      Drop files here
    </div>
  );
}

useDrag

When to use

Signature

Example

See also