React Keyed File Browser GitHub  |  NPM

To participate in the demonstration you will need:

All examples given are written with babel loaders to support es6 (stage-0) and JSX syntax.

Simple Flat & Read-Only Example

This example demonstrates read-only use of the browser, with a flat list of files (the keys do not contain any forward slashes so no folders are drawn).

Loading ...

Nested Table with Event Handlers

In this example, the files are contained within common folders as indicated by the forward slash in the file keys.

Simple event handlers are also provided as props to the browser, which allow it to respond to actions on the files. The presence of these handlers enables the buttons and/or the drag & drop responsiveness.

This example is not connected to any file storage backend; it simply takes all changes made by the user and assumes that they would have been successful.

Loading ...

Different Renderers and Groupers

In this example, the files and folder renderers have been replaced with Thumbnail renderers. Files are grouped by their month modified rather than their keyed folder structure.

Loading ...