React File Manger
Multi-column File Manager based on react-beautiful-dnd.
Live Demo
Install
yarn add react-file-manager
Build
yarn lib
Usage
See Example App
You can also check out a Real world app using this file mangager to upload files on server (NodeJS, Express, MongoDB, GraphQL...)
API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| map | Files object. See Example Mandatory fields : "id", "children", "parent" | None | true | normalized data map (You can use easily setup a normalizr schema. |
| rootId | Number | None | true | Id of root folder |
| onChange | Object => void | None | true | Triggered when file structure changes |
| onChangeRow | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of row |
| onChangeColumn | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of column |
| onOutsideDrop | (itemId, files) => void | (a,b) => {} | false | Triggered when files from outside are dropped into a column |
| dropzoneConfig | object | {} | false | react-dropzone config |
| renderItem | Object => React.Element | React.Element | false | Selected item rendering |
| renderPreview | Object => React.Element | React.Element | false | Selected item preview rendering |
| itemSelectedColor | String | '#1a53ff' | false | Item Selected color |
| dropBackgroundColor | String | '#cccdce' | false | Drop column background color |
TODO
- Add tests
- Extended version example
All contributions are welcome.