# react-birch-headless > Stylish solution for rendering nested trees in React apps Latest version **2.0.7** (published 2021-05-22) · MIT license · 0 weekly downloads ## Install ```sh npm install react-birch-headless pnpm add react-birch-headless yarn add react-birch-headless bun add react-birch-headless ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.7 | | Published | 2021-05-22 | | First published | 2021-05-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 12.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | Tinia Labs | | Maintainers | guycreate | | Keywords | react, virtualized, file, monaco, vscode, tree, nested, object, list | ## Links - npm: https://www.npmjs.com/package/react-birch-headless - Repository: https://github.com/tinialabs/react-birch - Homepage: https://github.com/tinialabs/react-birch#readme - Issues: https://github.com/tinialabs/react-birch/issues - npm.io page: https://npm.io/package/react-birch-headless ## Dependencies (5) - [mobx](https://npm.io/package/mobx.md) ^4.15.4 - [path-fx](https://npm.io/package/path-fx.md) ^2.1.1 - [p-series](https://npm.io/package/p-series.md) ^2.1.0 - [react-window](https://npm.io/package/react-window.md) ^1.8.6 - [react-birch-event-emitter](https://npm.io/package/react-birch-event-emitter.md) ^2.0.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.7 (latest) — 2021-05-22 - 2.0.6 — 2021-05-21 - 2.0.4 — 2021-05-21 - 2.0.3 — 2021-05-19 - 2.0.1 — 2021-05-16 ## README # React Birch React Birch is one of **the most** performant solution for displaying ~~nested trees~~ *dynamic* nested trees in React apps. It was forked from [`react-aspen`](https://github.com/NeekSandhu/react-aspen) which claims the performance spot (I haven't verified delta) and further streamlined to: ## Motivation and Enhancements Included * Support a `VSCode` Monaco-like configuration-driven API * Consolidate multiple packages into a single `react-birch` (with a mono repository structure to include highly associated but loosely coupled dependencies like `react-birch-context-menu`) * Use `React Hooks` instead of React `Components` throughout * Use [`styled-components`](https://www.styled-components.com/) and standard theming instead of custom `.sass` and non-standard theming * Uses `VSCode` styling for folder views for a professional look out of the box * Allows concept of configurable action commands for each tree row and for a tree title area; examples are provided for `Add Item`, `Delete Item`, `Rename Item` and `Collapse All`; these can be shown in both right click context menus as well as tiny icons on one side of each row, just like VSCode * Eliminate dependencies where possible (e.g., `tinyemitter` and `Notificar` replaced with a very simple in repository fork called `react-birch-event-emitter`) Just like `react-aspen`, it uses lightning fast `TypedArray`s to represent the data and `react-window` for super-efficient rendering. You define **what** needs to be rendered and Birch figures out the **how** ## Base Features - Zero recursion. Unlike most implementations, which recurse the given nested object to flatten it out at once, Birch sets up an initial `Uint32Array` for initially visible items and then uses *diff/patch* technique thereafter for when subsequent nodes are expanded or collapsed. During benchmarks (expanding/collapsing nodes), Birch was `150x` faster than `react-virtualized-tree` which uses recursive flattening and `4x` faster than VSCode's TreeView which uses "linked-lists" as the data container (see below for flamegraph) - Best of the best; Birch uses `Uint32Arrays` internally to represent the flattened structure, this is awesome since `TypedArrays` are way faster than regular `Arrays` in all the operations, especially splicing and lookups. While benchmarking, `TypedArray`s were found to be `5x` times faster than regular `Array`s when tested in Safari. - Ability to rename (and create new) items **inline**, previsously this was not so trivial especially when working with virtualized lists. Just call `#promptRename` or `#promptNewItem` and setup your renderer to render the passed `` component as you like. - `Drag`, `Drop`, `Add`, `Move`, `Remove` anything and anywhere, Birch will seamlessly apply that update while preserving tree expansion state, once again, without recursion. Updates like these get applied like "patches" thus nothing gets lost. - Since Birch uses virtualized lists, *nested* structures aren't rendered as *nested* DOM nodes, but instead as individual items, thus CSS inheritence doesn't work. Therefore, to fix that Birch comes with a slick decorations system (in addition to `styled-components`), where you can specify the styles for one parent and Birch will work out the inheritance automatically for all of its children (of course you can negate any children if you so desire, just like CSS's `:not` selector). These were just some of the awesome features Birch has to offer. Birch still has a lower-level library with a lot of very low-level API's. With that said, if you truly want low-level and don't want the Monaco API, then you may find the original `react-aspen` more to your liking. ## Usage ```bash npm i react-birch ``` It is highly recommended that you fork off of [`sample`](https://github.com/tinialabs/react-birch/tree/master/packages/sample) which has all of the high level features implemented and ready-to-go. Once you fork, please give back by creating a pull request should you make a change. That helps all of us. ## License Licensed under MIT license. If you use this package in your app or product please consider crediting as you see fit. Not required, but would be nice 🙂 --- _Source: https://npm.io/package/react-birch-headless · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._