Drop-zone in ReactJS

In this blog, we know about what is react-drop-zone and how to use it

First, create a new project using this command:

npx create-react-app

Then, install react-drop-zone using this command:

npm install --save react-dropzone

or
 
yarn add react-dropzone

After successfully completing, paste this code into your app.js file and enjoy drop-zone features:

import { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
// import './App.css';

const Drop=()=> {
  const {acceptedFiles, getRootProps, getInputProps,isDragActive} = useDropzone();
//   const [a,sa]=useState()
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      Name:- {file.path}, Size: - {file.size} bytes
    </li>
  ));
  return (
    <div className="App">
      <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>
       <ul>{files}</ul>
    </div>
  );
}

export default Drop;

Demo: