# react-dir-tree

> Directory Tree React Component

Latest version **0.1.8** (published 2021-05-22) · 0 weekly downloads

## Install

```sh
npm install react-dir-tree
pnpm add react-dir-tree
yarn add react-dir-tree
bun add react-dir-tree
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2021-05-22 |
| First published | 2021-05-22 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 43.5 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | Jose Aburto |
| Maintainers | jose_aburto |
| Keywords | material-ui, dir-tree, motion, react, spring |

## Links

- npm: https://www.npmjs.com/package/react-dir-tree
- Repository: https://github.com/PinoFlores/react-dir-tree
- Homepage: https://github.com/PinoFlores/react-dir-tree#readme
- Issues: https://github.com/PinoFlores/react-dir-tree/issues
- npm.io page: https://npm.io/package/react-dir-tree

## Dependencies (13)

- [axios](https://npm.io/package/axios.md) ^0.21.1
- [react](https://npm.io/package/react.md) ^17.0.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [react-spring](https://npm.io/package/react-spring.md) ^9.1.2
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.58
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.4
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.2
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.1.8 (latest) — 2021-05-22
- 0.1.7 — 2021-05-22
- 0.1.6 — 2021-05-22
- 0.1.5 — 2021-05-22
- 0.1.4 — 2021-05-22
- 0.1.3 — 2021-05-22
- 0.1.2 — 2021-05-22
- 0.1.1 — 2021-05-22
- 0.1.0 — 2021-05-22

## README

# React Directory Tree `react-dir-tree`

This package provide a `Directory Tree Component` that show a given tree structure. By the moment depends
on [Material UI](https://material-ui.com/), in future will change.

[![Build](https://github.com/pmndrs/react-spring/actions/workflows/main.yml/badge.svg?style=flat&colorA=000000&colorB=000000)](https://github.com/pmndrs/react-spring/actions/workflows/main.yml) [![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&type=6&v=1.0.0&x2=0)](https://badge.fury.io/js/react-spring)

### How to use this module

Wrap this component inside `DirTreeProvider`

```js
<DirTreeProvider
  baseUrl="http://localhost:2000/dirtree"
  baseDirectory="C://Users//user//Documents//labs"
>
  <LazyDirectory
    onDirSelect={(selected) => console.log(selected)}
    directoryContainer={(component) => <>{component}</>}
  />
</DirTreeProvider>
```

## Service

**Import:** this version depends on api service to get that structure, so make sure that you are providing and that service is up and running. This is a simple example of a `nodej` service that uses `express` to expose that service.

### Service creating example

```bash
yarn add express cors morgan directory-tree
yarn add --dev nodemon
```

```js
./src/index.js

const express = require("express");
const app = express();

const path = require("path");
const _ = require("lodash");
const cors = require("cors");
const morgan = require("morgan");
const driTree = require("directory-tree");

app.use(cors());
app.use(morgan("dev"));



const configs = {
  exclude: [/node_modules/, /.git/],
};

const getSubDirsFromPath = (startPath) => {
  return getJustDirs(driTree(startPath, configs));
};

const getJustDirs = (prop) => {
  let aux = prop;
  delete aux.size;
  const pChildren = [];
  if (_.has(aux, "children")) {
    for (let i = 0; i < aux.children.length; i++) {
      let child = aux.children[i];
      if (child.type === "directory") {
        if (_.has(child, "children")) {
          child = getJustDirs(child);
        }
        pChildren.push(child);
      }
    }
  }
  return {...aux, children: pChildren};
};


app.get("/dirtree", (req, res) => {
  let dir = req.query.dir;
  if (!dir) {
    return res.status(404).send({
      message: "dir path is required!",
    });
  }
  const dirAux = path.resolve(dir);
  const tree = getSubDirsFromPath(dirAux);
  return res.send({path: tree});
});

app.listen(2000, () => {
  console.log("Directory Tree Service Running at :::2000");
});


```

---
_Source: https://npm.io/package/react-dir-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._