• Version 14.2.3
  • Published
  • 434 kB
  • 3 dependencies
  • MIT license


npm i react-dropzone
yarn add react-dropzone
pnpm add react-dropzone


Simple HTML5 drag-drop zone with React.js



function Dropzone

Dropzone: (
props: DropzoneProps & React.RefAttributes<DropzoneRef>
) => JSX.Element;

    function useDropzone

    useDropzone: (options?: DropzoneOptions) => DropzoneState;


      interface Accept

      interface Accept {}

        index signature

        [key: string]: string[];

          interface DropzoneInputProps

          interface DropzoneInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

            property refKey

            refKey?: string;

              interface DropzoneProps

              interface DropzoneProps extends DropzoneOptions {}

                method children

                children: (state: DropzoneState) => JSX.Element;

                  interface DropzoneRef

                  interface DropzoneRef {}

                    property open

                    open: () => void;

                      interface DropzoneRootProps

                      interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {}

                        property refKey

                        refKey?: string;

                          index signature

                          [key: string]: any;

                            interface FileError

                            interface FileError {}

                              property code

                              code: ErrorCode | string;

                                property message

                                message: string;

                                  interface FileRejection

                                  interface FileRejection {}

                                    property errors

                                    errors: FileError[];

                                      property file

                                      file: File;


                                        enum ErrorCode

                                        enum ErrorCode {
                                        FileInvalidType = 'file-invalid-type',
                                        FileTooLarge = 'file-too-large',
                                        FileTooSmall = 'file-too-small',
                                        TooManyFiles = 'too-many-files',

                                          member FileInvalidType

                                          FileInvalidType = 'file-invalid-type'

                                            member FileTooLarge

                                            FileTooLarge = 'file-too-large'

                                              member FileTooSmall

                                              FileTooSmall = 'file-too-small'

                                                member TooManyFiles

                                                TooManyFiles = 'too-many-files'

                                                  Type Aliases

                                                  type DropEvent

                                                  type DropEvent =
                                                  | React.DragEvent<HTMLElement>
                                                  | React.ChangeEvent<HTMLInputElement>
                                                  | DragEvent
                                                  | Event;

                                                    type DropzoneOptions

                                                    type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
                                                    accept?: Accept;
                                                    minSize?: number;
                                                    maxSize?: number;
                                                    maxFiles?: number;
                                                    preventDropOnDocument?: boolean;
                                                    noClick?: boolean;
                                                    noKeyboard?: boolean;
                                                    noDrag?: boolean;
                                                    noDragEventsBubbling?: boolean;
                                                    disabled?: boolean;
                                                    onDrop?: <T extends File>(
                                                    acceptedFiles: T[],
                                                    fileRejections: FileRejection[],
                                                    event: DropEvent
                                                    ) => void;
                                                    onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
                                                    onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
                                                    getFilesFromEvent?: (
                                                    event: DropEvent
                                                    ) => Promise<Array<File | DataTransferItem>>;
                                                    onFileDialogCancel?: () => void;
                                                    onFileDialogOpen?: () => void;
                                                    onError?: (err: Error) => void;
                                                    validator?: <T extends File>(file: T) => FileError | FileError[] | null;
                                                    useFsAccessApi?: boolean;
                                                    autoFocus?: boolean;

                                                      type DropzoneState

                                                      type DropzoneState = DropzoneRef & {
                                                      isFocused: boolean;
                                                      isDragActive: boolean;
                                                      isDragAccept: boolean;
                                                      isDragReject: boolean;
                                                      isFileDialogActive: boolean;
                                                      acceptedFiles: File[];
                                                      fileRejections: FileRejection[];
                                                      rootRef: React.RefObject<HTMLElement>;
                                                      inputRef: React.RefObject<HTMLInputElement>;
                                                      getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
                                                      getInputProps: <T extends DropzoneInputProps>(props?: T) => T;

                                                        Package Files (1)

                                                        Dependencies (3)

                                                        Dev Dependencies (66)

                                                        Peer Dependencies (1)


                                                        To add a badge like this badgeto your package's README, use the codes available below.

                                                        You may also use to create a custom badge linking to

                                                        • Markdown
                                                        • HTML
                                                          <a href=""><img src="" alt=""></a>