Skip to content

Folder based file browser given a flat keyed list of objects, powered by React.

License

Notifications You must be signed in to change notification settings

chrisvenczel/react-keyed-file-browser

This branch is 137 commits ahead of, 5 commits behind uptick/react-keyed-file-browser:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

May 24, 2023
30bb100 · May 24, 2023
May 24, 2023
Jan 20, 2023
May 24, 2023
Jun 4, 2021
Oct 11, 2022
Nov 25, 2016
Mar 30, 2020
Jan 15, 2018
Jun 20, 2021
Dec 3, 2021
Jul 20, 2021
Jan 20, 2023
Jan 20, 2023
Jan 20, 2023

Repository files navigation

react-keyed-file-browser

Build Status 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
npm install react-keyed-file-browser

# Yarn
yarn add react-keyed-file-browser
import React from 'react'
import ReactDOM from 'react-dom'

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

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

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';

or tag:

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

Examples

Using a custom drag and drop 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>

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

About

Folder based file browser given a flat keyed list of objects, powered by React.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.7%
  • Sass 6.3%