https://github.com/uptick/react-keyed-file-browser
Folder based file browser given a flat keyed list of objects, powered by React.
https://github.com/uptick/react-keyed-file-browser
Last synced: 8 months ago
JSON representation
Folder based file browser given a flat keyed list of objects, powered by React.
- Host: GitHub
- URL: https://github.com/uptick/react-keyed-file-browser
- Owner: uptick
- License: mit
- Archived: true
- Created: 2016-11-22T06:08:29.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-04-02T23:58:28.000Z (about 2 years ago)
- Last Synced: 2025-09-16T23:34:14.301Z (9 months ago)
- Language: JavaScript
- Size: 2.73 MB
- Stars: 312
- Watchers: 22
- Forks: 148
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-keyed-file-browser
[](https://travis-ci.org/uptick/react-keyed-file-browser)
[](http://badge.fury.io/js/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:
```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(
,
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(
,
mount[0]
);
```
or your own icons by specifying as so:
```javascript
,
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
```
## 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/.