rexplorer v0.3.0

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 = require('./sampleData.json')

class App extends Component {
  render() {
    return (
      <Rexplorer data={dataSource}>
        {({ getFileTree, getFileContents }) => (
          <div>
            <div>{getFileTree()}</div>
            <div>{getFileContents()}</div>
          </div>
        )}
      </Rexplorer>
    )
  }
}

The Data Source

The data source above can be obtained from the output of libraries such as directory-tree, this is the json structure Rexplorer expects can be generated as shown.

const dirTree = require('directory-tree')
const tree = dirTree('./')

produces this output below

"path": "./"
"name": "."
"children": [
  {
    "path":"folder1",
    "name": "folder1",
    "children": []
  },
    {
    "path":"folder2",
    "name": "folder2",
    "children": []
  }
]

Build

λ npm run build