useDropZone

A custom hook that processes drag and drop events to create a zone for receiving files.

Code

🔗 View source code

Interface

typescript

const useDropZone: <T extends HTMLElement>(onDrop: (files: File[]) => void) => {
  ref: React.RefObject<T | null>;
  isDragOver: boolean;
}

Parameters

Name	Type	Description
onDrop	(files: File[]) => void	Callback function called when files are dropped

Returns

Name	Type	Description
ref	React.RefObject<T | null>	Ref to attach to the drop zone element
isDragOver	boolean	Whether a dragged item is currently over the drop zone

Usage

typescript

import { useState } from 'react';
import { useDropZone } from '@modern-kit/react';

const Example = () => {
  const [fileNameList, setFileNameList] = useState<string[]>([]);

  const { ref, isDragOver } = useDropZone((files) => {
    console.log('files', files);
    setFileNameList(files.map((file) => file.name));
  });

  const wrapperStyle = {
    width: '400px',
    height: '200px',
    border: '1px solid #000',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  }

  return (
    <div>
      <div ref={ref} style={wrapperStyle}>
        <p>DropZone</p>
        <p>isDragOver: {`${isDragOver}`}</p>
      </div>
      <ul>
        {fileNameList.map((fileName, index) => (
          <li key={`${fileName}-${index}`}>{fileName}</li>
        ))}
      </ul>
    </div>
  );
};

Example

Drop files here

isDragOver: false