React Simple Explorer

A simple package for directory tree visualization.

Usage

import React from 'react'
import ReactSimpleExplorer from 'react-simple-explorer'

const folderEntries = [
  {
    name: "some-image.png",
    type: "file",
    size: 3000,
    author: "John Doe",
    createdAt: "2020-12-01T10:23:00-03:00",
    modifiedAt: "2020-12-01T10:23:00-03:00",
  },
  {
    name: "assets",
    type: "folder",
    size: 0,
    author: "John Doe",
    createdAt: "2020-12-01T10:23:00-03:00",
    modifiedAt: "2020-12-01T10:23:00-03:00",
  },
]

const App = () => (
  <ReactSimpleExporer
    entries={folderEntries}
  />
)

Example: Fetching from S3

Let's assume you have a helper function fetchEntriesFromS3() that fetches files and folders from an AWS S3 bucket.

import React, { useState, useEffect } from 'react'
import ReactSimpleExplorer from 'react-simple-explorer'

const App = () => {
  const [currentFolder, setCurrentFolder] = useState('/')
  const [loading, setLoading] = useState(true)
  const [entries, setEntries] = useState([])

  useEffect(async () => {
      setEntries(await fetchEntriesFromS3(currentFolder))
      setLoading(false)
  }, [currentFolder])

  const handleFileClick = () => { ... }

  const handleFolderClick = (folder) => {
    setCurrentFolder(folder)
  }

  return (
    <ReactSimpleExporer
      loading={loading}
      entries={folderEntries}
      onFileClick={handleFileClick}
      onFolderClick={handleFolderClick}
    />
  )
}

Props available

Prop Name	Type	Description	Default
loading	boolean	Shows a spinner and a loading message, defined by the loadingLabel prop, instead of the file and folder entries.	false
loadingLabel	string	Sets a custom loading message.	"Loading..."
entries	array	An array of files and/or folders entries to populate the explorer list. Each entry must have at least two fields named name and type. The type field must have one of the following values: 'file' or 'folder'.	[]
onEntryClick	function	A function that should be called every time an entry is clicked. Will be triggered for both file and folders entries' click.	() => {}
onFileClick	function	A function that should be called every time a file entry is clicked. It has precedence over the onEntryClick callback.	() => {}
onFolderClick	function	A function that should be called every time a folder entry or breadcrumb piece is clicked. It has precedence over the onEntryClick and handleBreadcrumbClick callbacks.	() => {}
currentFolder	string	A string defining the current folder from which the entries are being shown.	/
showUpNavigationEntry	boolean	Defines if an entry indicating an upper navigation must be shown.	false
navigateUpLabel	string	Sets a custom label for the up navigation entry.	"Navigate up..."
handleNavigationUp	function	A function that should be called every time the navigate up entry is clicked.	() => {}
showBreadcrumb	boolean	Defines if a breadcrumb must be shown above the file explorer panel. The breadcrumb will use the value of the currentFolder prop to determine its pieces.	false
handleBreadcrumbClick	function	A function that should be called every time a breadcrumb piece is clicked.	() => {}
enableEntryClick	boolean	Defines if the entries, both files and folders, on the panel should be clickable.	true
enableFileClick	boolean	Defines if the file entries on the panel should be clickable.	true
enableFolderClick	boolean	Defines if the folder entries on the panel should be clickable.	true
customTableDefinitions	array	An array with objects containing two fields, label and key, that should be used to structure the columns for the file explorer table based on the data from the entries prop.	See below
dateTimeFormat	string	The datetime format based on the Unicode Tokens that should be used to display the data from the createdAt and modifiedAt fields when they are present within the data from the entries prop.	yyyy-MM-dd HH:m
showSearchBar	boolean	Defines if a search bar will be shown	true
searchPlaceholder	string	Sets the placeholder for the search bar input	"Type something to search..."

Default Table Definitions

  [
    {
      label: 'Name',
      key: 'name'
    },
    {
      label: 'Size',
      key: 'size'
    },
    {
      label: 'Author',
      key: 'author'
    },
    {
      label: 'Created At',
      key: 'createdAt'
    },
    {
      label: 'Modified At',
      key: 'modifiedAt'
    }
  ]