Skip to main content

FileBrowser

Dependencies​

npm install @mui/material @emotion/react @emotion/styled

Usage​

import FileBrowser from "@arclockproject/common/components/FileBrowser";

The examples below are live. Edit the code to try your own values.

Browsing files​

A base path of /home/user and 5 files. customAction runs when you click a file (not a folder). Here it shows the path below the browser.

Pass the same array on every render (e.g. with useMemo). A new array resets the browser to the top folder.

▶ Show code (click to view and edit)
Live Editor
function FileBrowserExample() {
  const [clicked, setClicked] = useState(null);
  const files = useMemo(
    () => ["/index.html", "/assets/image.png", "/assets/videos/intro.mp4", "/assets/icon.svg", "/LICENSE"],
    [],
  );

  return (
    <div>
      <FileBrowser
        base="/home/user"
        customAction={(file) => setClicked(file)}
        fileSystemRaw={files}
      />
      <p>You clicked: <code>{clicked ?? "nothing yet"}</code></p>
    </div>
  );
}
Result
Loading...

Your own files​

One path per line. Folders are made from the parts of each path.

▶ Show code (click to view and edit)
Live Editor
function FileBrowserPlayground() {
  const [paths, setPaths] = useState(
    ["/src/index.ts", "/src/components/Button.tsx", "/src/components/Card.tsx", "/README.md"].join("\n")
  );
  const files = useMemo(() => paths.split("\n").filter(Boolean), [paths]);

  return (
    <div>
      <textarea value={paths} onChange={(e) => setPaths(e.target.value)} rows={5} style={{ width: "100%" }} />
      <FileBrowser fileSystemRaw={files} />
    </div>
  );
}
Result
Loading...

API​

See the FileBrowser API reference for every prop, method and type.