@kylehue/drawer v2.2.1

Drawer

Drawer is a front-end library for creating dynamic file explorers.

Install

NPM:

npm install @kylehue/drawer

CDN:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kylehue/drawer/build/styles/style.css">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/@kylehue/drawer/browser/Drawer.js"></script>

Usage

import { Drawer } from "@kylehue/drawer";

const drawer = new Drawer({
   /* ...options */
});

const root = drawer.initRoot(document.querySelector("#drawer"));

// Adding items
root.add("src/classes/comps/sample.txt");

// Deleting items
root.delete("/src/classes/comps");

// Moving items
root.get("src/classes")?.move("/");

// Listen on item add
drawer.onDidAddItem((desc) => {
   console.log(desc.item.source + " has been added!");
});

// Listen on error
drawer.onError((error) => {
   console.error(error.reason);
});

Styling

Here are some of the styles that can be customized.