react-keyed-file-browser

!Downloads

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:

``bash


NPM

npm install react-keyed-file-browser

Yarn

yarn add react-keyed-file-browser
`


`javascript
import React from 'react'
import ReactDOM from 'react-dom'

import FileBrowser from 'react-keyed-file-browser'

ReactDOM.render(
files={[]}
/>,
document.getElementById('root')
);
`

Include icons from FontAwesome 4:

`javascript
import React from 'react'
import ReactDOM from 'react-dom'

import FileBrowser, { Icons } from 'react-keyed-file-browser'

// this imports the FontAwesome Icon Styles
import 'font-awesome/css/font-awesome.min.css'

var mount = document.querySelectorAll('div.browser-mount');
ReactDOM.render(
files={[]}
icons={Icons.FontAwesome(4)}
/>,
mount[0]
);
`

or your own icons by specifying as so:
`javascript
files={[]}
icons={{
File: ,
Image: ,
PDF: ,
Rename: ,
Folder: ,
FolderOpen: ,
Delete: ,
Loading: ,
}}
/>
`

Optionally, include the built css with an import:

`scss
@import 'node_modules/react-keyed-file-browser/dist/react-keyed-file-browser.css';
`
or tag:

`html
href="static/node_modules/react-keyed-file-browser/dist/react-keyed-file-browser.css"
rel="stylesheet"
>
`


Examples

Using a custom drag and drop provider.
`javascript
import { RawFileBrowser } from 'react-keyed-file-browser'

import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'




``

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/.