React File Manger


Multi-column File Manager based on react-beautiful-dnd.

Live Demo

Install

``bash
yarn add react-file-manager
`

Build


`bash
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
- [x] Extended version as default

All contributions are welcome.