react-dropzone/typings/react-dropzone.d.ts

Simple HTML5 drag-drop zone with React.js

import * as React from "react";

export default function Dropzone(props: DropzoneProps): JSX.Element;
export function useDropzone(options?: DropzoneOptions): DropzoneState;

export interface DropzoneProps extends DropzoneOptions {
  children?(state: DropzoneState): JSX.Element;
}

export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
  minSize?: number;
  maxSize?: number;
  preventDropOnDocument?: boolean;
  disabled?: boolean;
  onDrop?(acceptedFiles: File[], rejectedFiles: File[], event: DropEvent): void;
  onDropAccepted?(files: File[], event: DropEvent): void;
  onDropRejected?(files: File[], event: DropEvent): void;
  getFilesFromEvent?(event: DropEvent): Promise<Array<File | DataTransferItem>>;
  onFileDialogCancel?(): void;
};

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

export type DropzoneState = {
  isFocused: boolean;
  isDragActive: boolean;
  isDragAccept: boolean;
  isDragReject: boolean;
  isFileDialogActive: boolean;
  draggedFiles: File[];
  acceptedFiles: File[];
  rejectedFiles: File[];
  rootRef: React.RefObject<HTMLElement>;
  inputRef: React.RefObject<HTMLInputElement>;
  getRootProps(props?: DropzoneRootProps): DropzoneRootProps;
  getInputProps(props?: DropzoneInputProps): DropzoneInputProps;
  open(): void;
};

export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
  refKey?: string;
  [key: string]: any;
}

export interface DropzoneInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  refKey?: string;
}

type PropTypes = "accept"
  | "multiple"
  | "onDragEnter"
  | "onDragOver"
  | "onDragLeave";