1.1.1 • Published 5 years ago

react-simple-explorer v1.1.1

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

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 NameTypeDescriptionDefault
loadingbooleanShows a spinner and a loading message, defined by the loadingLabel prop, instead of the file and folder entries.false
loadingLabelstringSets a custom loading message."Loading..."
entriesarrayAn 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'.[]
onEntryClickfunctionA function that should be called every time an entry is clicked. Will be triggered for both file and folders entries' click.() => {}
onFileClickfunctionA function that should be called every time a file entry is clicked. It has precedence over the onEntryClick callback.() => {}
onFolderClickfunctionA function that should be called every time a folder entry or breadcrumb piece is clicked. It has precedence over the onEntryClick and handleBreadcrumbClick callbacks.() => {}
currentFolderstringA string defining the current folder from which the entries are being shown./
showUpNavigationEntrybooleanDefines if an entry indicating an upper navigation must be shown.false
navigateUpLabelstringSets a custom label for the up navigation entry."Navigate up..."
handleNavigationUpfunctionA function that should be called every time the navigate up entry is clicked.() => {}
showBreadcrumbbooleanDefines 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
handleBreadcrumbClickfunctionA function that should be called every time a breadcrumb piece is clicked.() => {}
enableEntryClickbooleanDefines if the entries, both files and folders, on the panel should be clickable.true
enableFileClickbooleanDefines if the file entries on the panel should be clickable.true
enableFolderClickbooleanDefines if the folder entries on the panel should be clickable.true
customTableDefinitionsarrayAn 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
dateTimeFormatstringThe 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
showSearchBarbooleanDefines if a search bar will be showntrue
searchPlaceholderstringSets 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'
    }
  ]