State container for Aspen trees
All the information about a tree. In one place.
Core component of react-aspen
So what is it?
View libraries which leverage aspen-core
for rendering nested trees can leverage this package as a state container for those Trees. Said libraries can
then give users the ability to save the tree state to serializable JSON string and then restore from it the next time users comes back to the app.
As of now, that "state" includes expanded directories and precise scroll position. Both of which are available in a serializable format and as "snapshots".
Usage
You shouldn't have to use this package "as is" unless you're porting react-aspen
to another framework.
npm i aspen-tree-model
This example assumes you're using this package with
react-aspen
(Other ports shouldn't be much different)
This package offers TreeModel
, the thing incharge of stuff. TreeModel
is exported by react-aspen
and an instance of it expected by FileTree
component.
ReactDOM.render , document.getElementById'app'
Here are some points of interest:
// observe tree state as it changes // attach a callback (will be called everytime user scrolls or expands/collapses a directory)// remember even the slightest scroll will trigger this callback, which can lead to performance issues// either throttle your callback or ignore based on `changeType`tsw.onChange // If at any point in your app's lifecycle you decide you're done with the watcher, remember to purge it properlytsw.dispose
API
This package is written in TypeScript. Type definitions are included when you install this package (directly or indirectly through a dependent library).
You can explore the full API here.
License
This project is licensed under MIT license. You are free to use, modify, distribute the code as you like (credits although not required, are highly appreciated)