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

uptick/react-keyed-file-browser

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

rootroot
root
and
root
Jan 20, 2023
369f2d4 · Jan 20, 2023
Jan 20, 2023
Jan 20, 2023
Jan 20, 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
Jun 4, 2021
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/.