« ^ »
[WIP]

Dropzoneのフックポイントを調査する

2022/2/14 更新
約 1分 で読める

Web U/Iでのファイルのアップロード処理などによく使用されるDropzoneのフックポイントについて調査した。

import { useState, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'

import logo from './logo.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const onDrop = useCallback(acceptedFiles => {
    setCount((count) => count + 1);
    console.log(acceptedFiles);
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
  const updateCount = () => {
    setCount((count) => count + 100);
  }

  return (
    <div className="App">
      <header className="App-header">
	<p>count is: {count}</p>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {
            isDragActive ?
              <p>Drop the files here ...</p> :
              <p>Drag 'n' drop some files here, or click to select files</p>
          }
        </div>
	<input type="submit" onClick={updateCount} />
      </header>
    </div>
  )
}

export default App

使用したパッケージ

  • Dropzone
  • React
  • Vite
  • react-dropzone

しむどん三度無視 により 2022/2/14 に投稿、2022/2/14 に最終更新
« ^ »