react-file-drop

juhojung·2022년 3월 2일
0

react.js

목록 보기
3/4

쓸만한 react 관련 도구 중 하나인듯.

https://github.com/sarink/react-file-drop/blob/master/file-drop/src/FileDrop.tsx
라이브러리를 만든 코드를 살펴보니 이벤트 리스너와 state 만으로 만든
라이브러리보다 툴에 가까워보이고, 큰문제가 없어보여서 채택
사실 만들기 귀찮았다

거두절미하고 코드부터 보여주자면,

import React, { useState, useEffect, useContext } from "react"; // default hooks
import { FileDrop } from "react-file-drop";
import "./filedrop.css";

export type FileDropProps = {
    onDrop: (files: FileList) => void;
    onDragOver: (event: any) => void;
    onDragLeave: (event: any) => void;
};

interface FinalFileDropProps extends FileDropProps {}

export const FileDropComp: React.FunctionComponent<FinalFileDropProps> = props => {
    return (
        <FileDrop
            // onFrameDragEnter={(event) => console.log('onFrameDragEnter', event)}
            // onFrameDragLeave={(event) => console.log('onFrameDragLeave', event)}
            // onFrameDrop={(event) => console.log('onFrameDrop', event)}
            onDragOver={event => {
                console.log("onDragOver", event);
                props.onDragOver(event);
            }}
            onDragLeave={event => {
                console.log("onDragLeave", event);
                props.onDragLeave(event);
            }}
            onDrop={(files, event) => {
                console.log("onDrop!", files, event);
                if (files) props.onDrop(files);
            }}
        >
            {props.children}
        </FileDrop>
    );
};

onDrop, onDravOver, onDragLeave Props를 지원하는 래핑 컴포넌트를 만들어봤다.
./fildrop.css 는 스타일 조정하기위해 추가해둔 css 파일이다. 없어도됨

profile
"어찌 할 수 없는 일에 대해 고민하는 시간은 낭비일 뿐이다."

0개의 댓글