Example of use

import React from 'react';
import FileExplorer from './react-file-explorer';
import FileExplorerApi, { BasicEntry, IEntryWithTypes } from './react-file-explorer/FileExplorerApi';

// Custom API to display how the component works.
const baseUrl = "https://myserver.org";
const api: FileExplorerApi = {
  async getFiles (path: string) {
    const files: IEntryWithTypes[] = await fetch(`${baseUrl}${path}`).then(res => {
      if (res.status === 200) {
        return res.json();
      }
      else {
        throw new Error(`Failed to get files from ${path}`);
      }
    });
    return BasicEntry.buildBulk(files);
  },

  async rename(path: string, newName: string) {
    console.log(`Renaming ${path} to ${newName}`);

    return fetch(`${baseUrl}${path}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        action: "rename",
        newName,
      }),
    }).then(res => {
      if (res.status === 200) {
        return true;
      }
      else {
        throw new Error(`Failed to rename ${path} to ${newName}`);
      }
    });
  },

  async openFile(path: string) {
    window.open(baseUrl + path);
  },

  pathToDataUrl(path: string) {
    return baseUrl + path;
  }
};

function App() {
  return (
    <div className="App" style={{
      width: "100vw",
      height: "100vh",
    }}>
      <FileExplorer api={api} />
    </div>
  );
}

export default App;