DEMO

npm i @jb_fmanager/react

yarn add @jb_fmanager/react

import { FileshareProvider } from "@jb_fmanager/react";

return (
  <FileshareProvider>
    <App />
  </FileshareProvider>
);

import { useUrls } from "@jb_fmanager/react";

export const MyComponent = () => {
  const urls = useUrls();

  return (
    <ul>
      {urls.map((url) => {
        <li key={url}>
          <image src={url} alt={url} />
        </li>;
      })}
    </ul>
  );
};

import { ReactFileManger } from "@jb_fmanager/react";

// include it anywhere in your app

const App = () => {
  return (
    <App>
      {open && (
        <ReactFileManager
          host="http://localhost:4000"
          isOpen={open}
          mountAlias="media"
          // other opts
        />
      )}
    </App>
  );
};

// A basic file tree structure

  [
    id: 'root', // or public, or anything (the top level folder)
    parent_id: null,
    dir: true,
    info: {
       created: "20.10.2019 01:46:40",
       mb: "0.05",
       bytes: "63564",
    },
    children: [
      {
        id: "root/subfolder"
        parent_id: "root",
        dir: true,
        info: {
          //...
        },
        children: [
          {
            id: 'root/subfolder/some_image.jpg', // every id is built upon the parent's id
            parent_id: 'root/subfolder',
            dir: false,
            info {
                  //...
            },
            // other children
          }

        ]
      }

    ]
  ]

 {
    overlay: "rgba(255,255,255,0.5)", // selected tile / record overlay
    input: {
      background: "transparent", // input background
      border: "#08acff", // input border
    },
    surface1: "#101010", // global
    surface2: "#6c6c6c", // file display
    surface3: "#030303", // navigation tree
    surface4: "#393939", // image / tile wrapper
    surface5: "#393939", // row / record wrapper
    surface6: "#141414", // context menu
    surface7: "#141414", // tooltip
    divider: "#3a3a3a", // border between sections
    font1: "#fff", // main font
    font2: "#c4c4c4", // secondary font
    font3: "#fff", // navigation font
    font4: "#fff", // contrast font
    syntax1: "darkgoldenrod", // folders on the main screen
    syntax2: "darkgoldenrod", // folders in the navigation tree
    syntax3: "#fff", // files on the main screen
    syntax4: "#fff", // files in the navigation tree
    syntaxFocus: "#08acff", // selection, focus
    primary: "#08acff", // primary color
    secondary: "#c4c4c4", // secondary color
    highlight: "rgba(255, 255, 255, 0.09)", // icon buttons background on hover
    shadow1: "0px 8px 13px -10px rgba(0, 0, 0, 0.25)", // global & tile shadow
    shadow2: "-5px 4px 12px -10px rgba(0, 0, 0, 1)", // dock shadow (right dock menu appears on smaller screens)
    shadow3:
      "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px", // menu, modal, tooltip
    shadow4:
      "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px", // file rows
  },