useDrop

Reads drag, drop, and paste data from a target element.

Import

import { useDrop } from '@kamod-ch/hooks'

Live demo

Basic demo

Reads drag, drop, and paste data from a target element.

Browser-only demo

This demo starts after the page mounts in the browser.

import { useRef, useState } from 'preact/hooks'
import { useDrag, useDrop } from '@kamod-ch/hooks'

export default function UseDropDemo() {
  const sourceRef = useRef<HTMLDivElement>(null)
  const targetRef = useRef<HTMLDivElement>(null)
  const [dropped, setDropped] = useState('nothing yet')
  useDrag({ label: 'Dragged payload' }, sourceRef)
  useDrop(targetRef, { onDom: (content) => setDropped(content?.label ?? 'received data') })

  return (
    <div class="demo-grid">
      <div ref={sourceRef} class="demo-target-box">Drag this payload</div>
      <div ref={targetRef} class="demo-target-box">Drop target</div>
      <p><strong>Drop result:</strong> {dropped}</p>
    </div>
  )
}

API

TypeScript signature

import type { BasicTarget } from '../utils/domTarget.js';
export interface Options {
    onFiles?: (files: File[], event?: DragEvent) => void;
    onUri?: (url: string, event?: DragEvent) => void;
    onDom?: (content: any, event?: DragEvent) => void;
    onText?: (text: string, event?: ClipboardEvent) => void;
    onDragEnter?: (event?: DragEvent) => void;
    onDragOver?: (event?: DragEvent) => void;
    onDragLeave?: (event?: DragEvent) => void;
    onDrop?: (event?: DragEvent) => void;
    onPaste?: (event?: ClipboardEvent) => void;
}
declare const useDrop: (target: BasicTarget, options?: Options) => void;
export default useDrop;
/

SSR considerations

This hook touches browser APIs. Render it after mount or guard it with BrowserOnly in SSR and static builds.

Browser compatibility

Requires the corresponding browser API to exist in the current environment.