Most advanced nested tree renderer for React apps
MIT License
React Aspen is the most performant solution for displaying nested trees dynamic nested trees in React apps.
It's uses lightning fast TypedArray
s to represent the data and react-window
for super-efficient rendering. You define what needs to be rendered
and Aspen figures out the how, while leaving you 100% incharge of the looks.
React aspen is used by some of sweetest companies around the planet:
Uint32Array
for150x
faster than react-virtualized-tree
which uses recursive flattening and 4x
faster than VSCode's TreeView which usesUint32Arrays
internally to represent the flattened structure, this is awesome since TypedArrays
are way faster than regular Arrays
in allTypedArray
s were found to be 5x
Array
s when tested in Safari.#peekABoo
will do just that. #openDirectory
, #closeDirectory
, #ensureVisible
, you name it!#promptRename
#promptNewFile
and setup your renderer to render the passed <ProxiedInput/>
component as you like.Drag
, Drop
, Add
, Move
, Remove
anything and anywhere, Aspen will seamlessly apply that update while preserving tree expansion state, once again, without recursion.:not
selector).These were just some of the awesome features Aspen has to offer. Aspen is a very low-level library with a lot of very low-level API's. With that said, your imagination is now the limit!
* Decorations system is not part of the core lib, instead its shipped separately as
aspen-decorations
package, see itsREADME
for how to wire it up withreact-aspen
vscode
and react-aspen
were put head-to-head and stress tested by repeatedly expanding and collapsing node_modules
directory which contained 562
directories. That is
562
items coming in and out of view on each expand and collapse respectively.
Each click event lead to toggling of directory state and an immediate render.
Tested on Intel i7 4700HQ 2.4GHZ 4 Cores / Nvidia GTX 860M (under normal workload and no throttling was enabled)
npm i react-aspen
Since react-aspen
is a low-level package, it does require little bit of love on your side. But once setup properly, you'll be set for eternity.
It is highly recommended that you fork off of react-aspen-demo
which has almost all of the features implemented and
ready-to-go. Features like keyboard shortcuts, dragging-dropping and other bunch of cool stuff. Once you fork, please give back by creating a pull request should you
make a change. That helps all of us.
As an alternative to forking, you can consider making it a git submodule in your project.
Here's a very stripped down version of what it takes to get Aspen going:
// MyCustomisedFileTree.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { TreeModel, FileTree, IBasicFileSystemHost, IFileEntryItem, IItemRenderer, IItemRendererProps, ItemType } from 'react-aspen'
// ...
const host: IBasicFileSystemHost = {
pathStyle: 'unix', // or 'win32'
getItems: (path: string): IFileEntryItem[] => {
// ...
}
}
const treeModel: TreeModel = new TreeModel(host, '/absolute/path/that/will/act/as/root')
class FileEntryItem extends React.Component {
// ...
}
ReactDOM.render(
<FileTree
height={500}
width={300}
itemHeight={FileEntryItem.renderedHeight}
model={treeModel}>
{({item, itemType}) => <FileEntryItem item={item} itemType={itemType} />}
</FileTree>,
document.getElementById('app'))
Above example only describes the moving parts it takes to get Aspen operational,
react-aspen-demo
has everything you need to use it in a production app.
Aspen comes with a decoration system to ease styling/tagging things for you. You can define a set of classnames (or "tags") to be applied to an item, optionally
all of its children (you can use negations, like CSS's :not
selector). Decoration engine will keep all the inheritances and negations up to date even when a
node changes its parent.
See aspen-decorations
for an example on how to wire it up with react-aspen
.
This project is written using TypeScript
and all the API is documented using TypeDoc
which can be found here.
At this point I do not plan to work on porting aspen to other framworks (vue
, angular
or vanilla). But good news is, 95% of what makes react-aspen
come to life
is available as separate standalone package called aspen-tree-model
. Most of the features listed above are
actually part of aspen-tree-model
package (except logic for inline prompts, since it's a UI thing). I believe it should be fairly easy to make that work. If you do
bring aspen to another framework, please open a issue/PR so we can add that to this readme.
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 🙂