Upgrading react-dropzone 7 to 8
Breaking7.0.1 → 8.2.0Breaking2New1Changed1Fixed4
BreakingUpgrade verdict
2 breaking changes.
In plain terms
- The Dropzone component no longer renders its own markup. You now pass it a function that returns the elements you want, so you control the look and structure.
- If you used Dropzone without giving it a function, it will no longer work. You must supply a function that builds the drop area.
Must act 2 items need code or config changes
Adds file-selector ^0.1.8, prop-types-extra ^1.1.0.
Installs 11 packages in all (was 7).
What you must change
Breaking2
Makes <Dropzone> headless, requiring a rendering function as children or as a prop.
DropzoneThe <Dropzone> component now requires a rendering function, either provided as the children or as a prop.
DropzoneAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- changed:
type DropFileEventHandler = (acceptedOrRejected: File[], event: React.DragEvent<HTMLDivElement>) => void → type DropFileEventHandler = (acceptedOrRejected: File[], event: React.DragEvent<HTMLElement>) => void - changed:
type DropFilesEventHandler = (accepted: File[], rejected: File[], event: React.DragEvent<HTMLDivElement>) => void → type DropFilesEventHandler = (accepted: File[], rejected: File[], event: React.DragEvent<HTMLElement>) => void - changed:
type DropzoneProps = Omit<React.HTMLProps<HTMLDivElement>, 'onDrop' | 'ref'> & { disableClick?: boolean; disabled?: boolean; preventDropOnDocument?: boolean; inputProps?: React.Inp… → type DropzoneProps = Pick<React.HTMLProps<HTMLElement>, PropTypes> & { children?: DropzoneRenderFunction; getDataTransferItems?(event: React.DragEvent<HTMLElement> | React.ChangeEv… - added:
index DropzoneRootProps[key: string]: any - added:
interface DropzoneInputProps extends React.InputHTMLAttributes<HTMLInputElement> - added:
interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> - added:
property DropzoneInputProps.refKey?: string - added:
property DropzoneRootProps.refKey?: string - added:
type DropzoneRenderArgs = { draggedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[]; isDragActive: boolean; isDragAccept: boolean; isDragReject: boolean; getRootProps: GetRoo… - added:
type GetInputPropsFn = (props?: DropzoneInputProps) => DropzoneInputProps - added:
type GetRootPropsFn = (props?: DropzoneRootProps) => DropzoneRootProps