# treact
> A react tree component
Latest version **1.0.2** (published 2016-11-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install treact
pnpm add treact
yarn add treact
bun add treact
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.2 |
| Published | 2016-11-20 |
| First published | 2016-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Clavelle |
| Maintainers | aclave1 |
## Links
- npm: https://www.npmjs.com/package/treact
- Repository: https://github.com/aclave1/treact
- Homepage: https://github.com/aclave1/treact#readme
- Issues: https://github.com/aclave1/treact/issues
- npm.io page: https://npm.io/package/treact
## Recent versions
- 1.0.2 (latest) — 2016-11-20
- 1.0.1 — 2016-11-19
- 1.0.0 — 2016-10-20
## README
# Treact
* self contained, no external styles or libraries are needed
* custom jsx templates for individual nodes, or the whole tree
* any node schema you want
* can convert flat arrays to tree representation
# Installation
Just call
```
import TreeView from 'treact';
```
There's no minified dist version currently. Feel free to submit a PR.
# Examples
Here are some contrived examples which highlight various features
Some real world use cases:
- building a file explorer
- building a context menu
# Api
##
Props api:
* `tree` (required): array of tree node data
* `isFlat`:if the tree node data is "flat"(a 1 dimensional array of nodes), the array will be converted into tree form
* `getters`: overridecallbacks used to retrieve node properties. Use these to override the schema of your nodes.
* `callbacks` : callbacks to indicate node events
* `classNames`:a map of custom classnames to override defaults
* `template`: custom per-node template function
* `indicators` : override default opened and closed indicators
### `tree`
The array of tree node data. This can be specified in 2 formats.
**Flat array**
The simplest format is a flat array of nodes. Here is an example of an array of tree nodes with the default node schema:
```
var nodes = [
{id:1,contents:'1',parent:null},
{id:2,contents:'2',parent:1},
{id:3,contents:'3',parent:1},
];
```
In the default schema, it is assumed that each node specifies a unique id, their parent, and their contents. Nodes with null/undefined parents are considered root nodes.
**Nested array**
A pre-built tree can also be accepted. Here is an example of a using a prebuilt tree:
```
var nodes = getNodes();
function getNodes(){
return [{
"id": 1,
"contents": "1",
"parent": null,
"children": [{
"id": 2,
"contents": "2",
"parent": 1,
"children": [{
"id": 3,
"contents": "3",
"parent": 2,
"children": [{
"id": 4,
"contents": "4",
"parent": 3,
"children": []
}]
}]
}]
}, {
"id": 5,
"contents": "5",
"parent": null,
"children": [{
"id": 7,
"contents": "7",
"parent": 5,
"children": []
}]
}, {
"id": 6,
"contents": "6",
"parent": null,
"children": [{
"id": 8,
"contents": "7",
"parent": 6,
"children": []
}]
}];
}
```
TreeView also provides the helper function `arrayToTree` which converts a flat node array into a tree.
### `getters`
Treact needs to know which properties to use to determine the node relationships. If the nodes do not conform to the correct schema, getters can be used to specify node relationships without requiring a pre-processing step. For example, lets say a database returns an array like this:
```
var nodes = [
{node_id:1,data:"some data",node_parent:null},
{node_id:2,data:"some data",node_parent:1},
{node_id:3,data:"some data",node_parent:1},
];
```
You could write these getters
```
var getters = {
id: node =>node.node_id,
contents: node =>node.node_data,
parent:node => node.node_parent
};
```
and use Treact exactly the same.
Here is a full list of the default getters
* `id`: unique id of the node
* `contents`: what to render in the node
* `parent`: node to nest current node under
* `children`: nodes nested under this node
* `isOpen`: whether the node is showing its children or not
and the code for them:
```
const defaultGetters = {
children:(node)=>node.children,
id:(node)=>node.id,
contents:(node)=>node.contents,
parent:(node)=>node.parent,
isOpen:(node)=>node.isOpen === true
};
```
### `callbacks`
The only callback available currently is `nodeToggled`. Here is an example of using it:
```
const callbacks = {
nodeToggled:(node)=>console.dir(node);
};
var nodes = [
{id:1,contents:'1',parent:null},
{id:2,contents:'2',parent:1},
{id:3,contents:'3',parent:1},
];
```
### `indicators`
Override the default open/closed indicators with custom jsx.
```
const customIcons = {
opened:">",
closed:"V"
};
const customJSXIcons = {
opened:
,
closed:
,
};
var nodes = [
{id:1,contents:'1',parent:null},
{id:2,contents:'2',parent:1},
{id:3,contents:'3',parent:1},
];
or
```
### `template`
override the default node template
```
var nodes = [
{id:1,contents:'1',parent:null},
{id:2,contents:'2',parent:1},
{id:3,contents:'3',parent:1},
]
var template = (node)=>(node.contents
