Skip to content

Commit fa2af7d

Browse files
authored
Update README.md
1 parent 23f2018 commit fa2af7d

File tree

1 file changed

+34
-9
lines changed

1 file changed

+34
-9
lines changed

README.md

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,54 @@ __Note: This is a work in progress; most of the features are not yet implemented
99
### Features
1010

1111
- Works right out of the box, but is highly customizable
12-
- No external CSS files
1312

1413
## Example
1514

1615
```jsx
17-
import React from 'react';
18-
import ReactSortableTree from 'react-sortable-tree';
16+
import React, { Component } from 'react';
17+
import SortableTree from 'react-sortable-tree';
18+
19+
export default class Tree extends Component {
20+
constructor() {
21+
this.state = {
22+
treeData: { title: 'Chicken', children: [ { title: 'Egg' } ] },
23+
};
24+
}
1925

20-
export default React.createClass({
2126
render() {
2227
return (
23-
<ReactSortableTree myName="World" />
28+
<SortableTree
29+
treeData={treeData}
30+
onChange={treeData => this.setState({ treeData })}
31+
/>
2432
);
2533
}
26-
});
34+
}
2735

2836
```
2937

3038
## Options
3139

32-
Property | Type | Default | Required | Description
33-
:-------------------|:------:|:--------------:|:--------:|:----------------------------------------
34-
myName | string | `World` | | Name of person/thing to greet.
40+
Property | Type | Default | Required | Description
41+
:-------------------------|:--------------:|:-------------------:|:--------:|:----------------------------------------
42+
treeData | object[] | | yes | Tree data in the following format: `[{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }]`.<br>`title` is the primary label for the node<br>`subtitle` is a secondary label for the node `expanded` shows children of the node if true, or hides them if false. Defaults to false.<br>`children` is an array of child nodes belonging to the node.
43+
style | object | | {} | Style applied to the container wrapping the tree (style defaults to {height: '100%'})
44+
className | string | | | Class name for the container wrapping the tree
45+
innerStyle | object | | {} | Style applied to the inner, scrollable container (for padding, etc.)
46+
rowHeight | number or func | `62` | | Used by react-virtualized Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`
47+
reactVirtualizedListProps | object | | | Custom properties to hand to the [react-virtualized list](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types)
48+
scaffoldBlockPxWidth | number | `44` | | The width of the blocks containing the lines representing the structure of the tree.
49+
maxDepth | number | | | Maximum depth nodes can be inserted at. Defaults to infinite.
50+
searchMethod | func | | | The method used to search nodes. Defaults to a function that uses the `searchQuery` string to search for nodes with matching `title` or `subtitle` values. NOTE: Changing `searchMethod` will not update the search, but changing the `searchQuery` will.
51+
searchQuery | any | | null | Used by the `searchMethod` to highlight and scroll to matched nodes. Should be a string for the default `searchMethod`, but can be anything when using a custom search.
52+
searchFocusOffset | number | | | Outline the <`searchFocusOffset`>th node and scroll to it.
53+
searchFinishCallback | func | | | Get the nodes that match the search criteria. Used for counting total matches, etc.
54+
generateNodeProps | func | | | Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the `buttons` key, or additional `style` / `className` settings.
55+
nodeContentRenderer | any | NodeRendererDefault | | Override the default component for rendering nodes (but keep the scaffolding generator) This is an advanced option for complete customization of the appearance. It is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.
56+
getNodeKey | func | defaultGetNodeKey | | Determine the unique key used to identify each node and generate the `path` array passed in callbacks. By default, returns the index in the tree (omitting hidden nodes).
57+
onChange | func | | yes | Called whenever tree data changed. Just like with React input elements, you have to update your own component's data to see the changes reflected.
58+
onMoveNode | func | | | Called after node move operation.
59+
onVisibilityToggle | func | | | Called after children nodes collapsed or expanded.
3560

3661
## Contributing
3762

0 commit comments

Comments
 (0)