You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-2Lines changed: 13 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -61,12 +61,13 @@ canDrag | func or bool | Return false from callback to preve
61
61
canDrop | func | Return false to prevent node from dropping in the given location. <div>`({ node: object, prevPath: number[] or string[], prevParent: object, prevTreeIndex: number, nextPath: number[] or string[], nextParent: object, nextTreeIndex: number }): bool`</div>
62
62
shouldCopyOnOutsideDrop | func or bool | Return true, or a callback returning true, and dropping nodes to react-dnd drop targets outside of the tree will not remove them from the tree. Defaults to `false`. <div>`({ node: object, prevPath: number[] or string[], prevTreeIndex: number, }): bool`</div>
63
63
reactVirtualizedListProps | object | Custom properties to hand to the [react-virtualized list](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types)
64
+
theme | object | Set an all-in-one packaged appearance for the tree. See the [Themes](#themes) section for more information.
64
65
rowHeight | number or func | Used by react-virtualized. Defaults to `62`. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`
65
66
slideRegionSize | number | Size in px of the region near the edges that initiates scrolling on dragover.Defaults to `100`.
66
67
scaffoldBlockPxWidth | number | The width of the blocks containing the lines representing the structure of the tree.Defaults to `44`.
67
68
isVirtualized | bool | Set to false to disable virtualization. Defaults to `true`. __NOTE__: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.
68
-
nodeContentRenderer | any | Override the default component ([`NodeRendererDefault`](https://github.com/fritz-c/react-sortable-tree/blob/master/src/node-renderer-default.js)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.
69
-
placeholderRenderer | any | Override the default placeholder component ([`PlaceholderRendererDefault`](https://github.com/fritz-c/react-sortable-tree/blob/master/src/placeholder-renderer-default.js)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with custom CSS instead.
69
+
nodeContentRenderer | any | Override the default component ([`NodeRendererDefault`](https://github.com/fritz-c/react-sortable-tree/blob/master/src/node-renderer-default.js)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.
70
+
placeholderRenderer | any | Override the default placeholder component ([`PlaceholderRendererDefault`](https://github.com/fritz-c/react-sortable-tree/blob/master/src/placeholder-renderer-default.js)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead.
70
71
71
72
## Data Helper Functions
72
73
@@ -87,6 +88,16 @@ Notable among the available functions:
87
88
Documentation for each method is only available in the code at this time. You can also refer to the tests for simple usage examples.
88
89
If your hobbies happen to include writing documentation, by all means submit a pull request. It would really help out.
89
90
91
+
## Themes
92
+
93
+
Using the `theme` prop along with an imported theme module, you can easily override the default appearance with another standard one.
94
+
95
+
### Featured themes
96
+
97
+
* File Explorer [Github](https://github.com/fritz-c/react-sortable-tree-theme-file-explorer)[NPM](https://www.npmjs.com/package/react-sortable-tree-theme-file-explorer)
98
+
99
+
*Help Wanted* As the themes feature has just been enabled, there are very few (only _one_ at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use my [file explorer theme repo](https://github.com/fritz-c/react-sortable-tree-theme-file-explorer) as a template to plug in your own stuff.
0 commit comments