myherbold-browser v1.31.0
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'
// this imports the FontAwesome Icon Styles
import 'font-awesome/css/font-awesome.min.css'
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';
Optionally, use your own React DND Provider:
import { RawFileBrowser } from 'react-keyed-file-browser'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
<DndProvider backend={HTML5Backend}>
<RawFileBrowser files={[]}/>
</DndProvider>
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/.
6 days ago
6 days ago
6 days ago
25 days ago
26 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago