react-file-explorer

Customizable and responsive file explorer component for React applications.

Getting Started

Installing

``
npm install --save react-file-explorer
``

Demo

React File Explorer

Properties

| Name | Type | Default | Required | Description |
| ---- | ---- | ------- | -------- | ----------- |
| data | array | [] | yes | The array of objects representing files and folders to be listed. See dedicated paragraph here |
| showHistory | boolean | true | no | Whether or not to show navigable history |
| rootLabel | string | 'Home' | no | Text to be shown as history root |
| onViewModeChange | function | () | no | Callback fired after the view mode changes |
| onSortModeChange | function | () | no | Callback fired after the sort mode changes |
| sortableByName | boolean | true | no | Whether or not show 'Sort by name' option in menu |
| sortableBySize | boolean | true | no | Whether or not show 'Sort by size' option in menu |
| sortableByType | boolean | true | no | Whether or not show 'Sort by type' option in menu |
| sortableByLastEdit | boolean | true | no | Whether or not show 'Sort by last edit' option in menu |
| onRename | function | (id, name) | no | Callback fired after a rename operation |
| onDelete | function | (id) | no | Callback fired after a delete operation |

Data

Data is an array of objects representing the entire structure of files and folders.

| Name | Type | Required | Description |
| ---- | ---- | -------- | ----------- |
| id | string or number | yes | Object identifier, must be unique |
| name | string | yes | Name to be shown |
| children | array | no | Weather is a file or a folder |

NOTE: An empty children array means that the object is an empty folder.

Style

You can add your custom style with both CSS and styled-components.

Those are the list of classes that you should override in order to customize the component.

#### File Explorer
.container

#### History
.history
.history-level

#### Menu
.menu
.first-level
.nested-level

#### Item
.node
.icon
.filename
.renaming-form
.renaming-form-input

IMPORTANT: In order to override existing style, sometimes you need to use the !important keyword.