react-keyed-file-browser
Folder based file browser given a flat keyed list of objects, powered by React.
Live Demo
Check out the live demo here: http://uptick.github.io/react-keyed-file-browser/
Installation
Install the package with npm:
npm install react-keyed-file-browser Then require and use with ES6 imports:
import React from 'react' import ReactDOM from 'react-dom' import FileBrowser from 'react-keyed-file-browser' var mount = document.querySelectorAll('div.browser-mount'); ReactDOM.render( <FileBrowser files=[] />, mount[0] );Include icons from FontAwesome 4:
import React from 'react' import ReactDOM from 'react-dom' import FileBrowser, {Icons} from 'react-keyed-file-browser' var mount = document.querySelectorAll('div.browser-mount'); ReactDOM.render( <FileBrowser files=[] icons={Icons.FontAwesome(4)} />, mount[0] );or your own icons by specifying as so:
<FileBrowser files=[] icons={{ File: <i className="file" aria-hidden="true" />, Image: <i className="file-image" aria-hidden="true" />, PDF: <i className="file-pdf" aria-hidden="true" />, Rename: <i className="i-cursor" aria-hidden="true" />, Folder: <i className="folder" aria-hidden="true" />, FolderOpen: <i className="folder-open" aria-hidden="true" />, Delete: <i className="trash" aria-hidden="true" />, Loading: <i className="circle-notch spin" aria-hidden="true" />, }} />Optionally, include the built css with an import:
@import 'node_modules/react-keyed-file-browser/dist/react-keyed-file-browser.css'; or tag:
<link href="static/node_modules/react-keyed-file-browser/dist/react-keyed-file-browser.css" rel="stylesheet" >Full reference documentation coming soon. For now, take a look at the reference implementation with event handlers on the live demo at http://uptick.github.io/react-keyed-file-browser/.
