useDropZone

드래그 앤 드롭 이벤트를 처리하여 파일을 수신할 수 있는 영역을 생성하는 커스텀 훅입니다.

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	파일이 드롭될 때 호출될 콜백 함수

Returns

Name	Type	Description
ref	React.RefObject<T | null>	드롭존 요소에 연결할 ref
isDragOver	boolean	현재 드래그 중인 항목이 드롭존 위에 있는지 여부

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

DropZone

isDragOver: false