npm

Need private packages and team management tools?Check out npm Orgs. »

react-file-manager

1.2.4 • Public • Published

React File Manger

GitHub license Build Npm Npm

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 as default

All contributions are welcome.

Keywords

none

install

npm i react-file-manager

Downloadsweekly downloads

6

version

1.2.4

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability