Configurable file explorer in React
Switch branches/tags
Nothing to show
Clone or download
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
src
stories
.babelrc
.gitignore
CHANGELOG.md
README.md
banner.png
package-lock.json
package.json
rollup.config.js
yarn.lock

README.md

npm gzip size

Overview

Rexplorer is a configurable and flexible general purpose file explorer built in React.

Disclaimer: This project is very experimental and subject to change, I built this component to learn about render props.

Install

λ npm install --save rexplorer

Usage

import React, {Component} from "react";
import { Rexplorer } from "rexplorer";

const dataSource = {
  folders: [
    {
      name: "Pictures",
      collapsed: false,
      contents: [{
        label: "pciture.jpg"
      }],
      folders: [{
        name: "Hiking",
        contents: [],
        folders: []
      }]
    },
    {
      name: "Music",
      collapsed: false,
      contents: [],
      folders: []
    }
  ]
};

class App extends Component {
  render() {
    return (
      <Rexplorer
        data={dataSource}
        render={({ getFileTree, getFileContents }) => (
              <div>
                <div style={{ float: "left" }}>{getFileTree()}</div>
                <div style={{ float: "left" }}>{getFileContents()}</div>
              </div>
            )}
        )}
      />
    );
  }
}

Build

λ npm run build