[React] react-dropzone 란?

Yuri Lee·2021년 12월 8일
0

Intro

파일 업로드를 구현하기 위하여 이용한 라이브러리인 react-dropzone 를 소개하고자 한다.

react-dropzone

HTML5 호환 드래그 앤 드롭 파일 영역을 만드는 Simple Respon hook 이다.

Installation

case1. npm

npm install --save react-dropzone

case2. yarn

yarn add react-dropzone

나의 경우는 해당 프로젝트에서 yarn을 사용하고 있기 때문에 위 명령어를 활용했다.

Example

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

<Basic />

https://react-dropzone.js.org/

profile
Step by step goes a long way ✨

0개의 댓글