React-simple-explorer NPM

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'
    }
  ]