TL;DR
ローカルのファイルを、ドラッグアンドドロップやファイル選択ダイアログで選ぶための React のライブラリ。React Hooks を中心にした API を持つ。
仕組み
useDropzone フックにオプションを渡し、返ってきた関数で要素に props を付ける。getRootProps() はドロップ領域となる親要素に、getInputProps() はクリックやキーボードでの操作を受け持つ非表示の <input> に展開する。onDrop は、受け付けたファイルを受け取るコールバックである。
例
import React from "react"
import { useDropzone } from "react-dropzone"
function MyDropzone() {
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
// サーバにアップロードするなど
console.log(acceptedFiles)
},
})
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
)
}