Zih0 / use-file-drop

react hook for drag & drop input file

use-file-drop

A simple hook for drag and drop file in react.

Installation

$ yarn add @zih0/use-file-drop

or, with npm:

npm install @zih0/use-file-drop

Usage

import React, { useEffect } from 'react';
import useFileDrop from '@zih0/use-file-drop';

const App () => {
  const { inputRef, labelRef, files, isDragActive } = useFileDrop();

  return (
    <div>
      <input ref={inputRef} id="upload" />
      <label ref={labelRef} htmlFor="upload">
        {isDragActive ? <span>Drop the file!</span> : <span>Drag and drop the file.</span>}
      </label>
    </div>
  )
};

Options

You can set input file attributes by options:

const { inputRef, files } = useFileDrop({ multiple: true, accept: 'image/*' });

License

MIT © Zih0