Skip to content
Folder based file browser given a flat keyed list of objects, powered by React.
JavaScript CSS HTML
Branch: master
Clone or download
Pull request Compare This branch is 23 commits behind uptick:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
demo-site
src
stories
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
babel.config.js
index.js
jsconfig.json
package.json
webpack.config.js
yarn.lock

README.md

react-keyed-file-browser

npm version 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:

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

You can’t perform that action at this time.