3.0.3 • Published 11 months ago
react-drag-drop-browser v3.0.3
react-drag-drop-browser
Simple, customizable react drag and drop component. Also comes with a file browser.
NPM page | Run example app on codesandbox
Installation
Installation can be done with yarn or npm
# yarn
yarn add react-drag-drop-browser
# npm
npm install react-drag-drop-browser‼️ Important
The maximum allowed file size is set to 1MB by default and can be changed as required. This is worth mentiontioning because there is no feedback provided. If you need to do that you should do the check yourself. I only included it as a sensible default to prevent the inadvertent upload of very large files.
Usage
<DragAndDrop /> props
| Prop | Default value | Description |
|---|---|---|
zoneId (optional, string) | hot-zone | A unique id to identify the hot zone |
dataTestId (optional, string) | hot-zone | data-testid of the hot zone |
maxSizeInMB (optional, number) | 1 | maximum allowed file size |
children (optional, string, ReactElement) | Drop files here | |
zoneClassName (optional, string) | hot-zone | Class to style the section element |
inZoneClassName (optional, string) | inside-hot-zone | This class is applied when the dragged file is within the hot zone |
render (optional, ReactElement) | undefinded | If this is defined, it takes precedence. In that case you have to attach the event handlers defined in the DragAndDropRenderProps prop |
onDropFiles (required, function) | A callback function that receives the array of files dropped into the hot zone |
<FileBrowser /> props
| Prop | Default value | Description |
|---|---|---|
dataTestId (optional, string) | file-browser | data-testid of the trigger button |
maxSizeInMB (optional, number) | 1 | maximum allowed file size |
inputId (optional, string) | input-id | id of the input element |
multiple (optional, boolean) | false | Whether to allow selecting multiple files |
allowedFileTypes (optional, string[]) | [".pdf", ".jpeg", ".png", ".jpg"] | The kinds of files to select |
pickerBtnText (optional, string) | Click here to browse files | Text of the file picker trigger button |
pickerBtnClassName (optional, string) | file-browser-button | Class to style the trigger button |
render (optional, ReactElement) | undefined | If this is defined, then the button is not rendered. It accepts an object with an onClick property |
onSelectFiles (required, function) | A callback function that receives the array of files dropped in the hot zone |
Contributing
- Clone the repository
- Open a terminal and
cdinto thedev-app/folder andpackage/folder and runyarn installin both separately - Linking for development. Inside
package/runnpm link. Then navigate to thedev-app/folder and runyarn link react-drag-drop-browser