diff --git a/README.md b/README.md index 958d6a7..5098e4f 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ Both options support component customization. - [examples](https://github.com/ke | `itemsRenderer` | `Component` | `items.js` | `Component to replace the default Items component. ` | | `forwardIconRenderer` | `Component` | | `Component to replace the default ForwardIcon component. ` | | `treeContainerRenderer`| `Component` | `tree_container.js` | `Component to replace the default TreeContainer component. ` | +| `customItemsRenderer ` | `Component` | | `Component to replace the default Items && inner Item component.`| | `markSelectedItem` | `boolean` | `false` | `Toggle to mark selected item. ` |
diff --git a/packages/core/src/tree.js b/packages/core/src/tree.js index daa76a0..c6740de 100644 --- a/packages/core/src/tree.js +++ b/packages/core/src/tree.js @@ -39,6 +39,7 @@ const Tree = props => { itemsRenderer: Items = ItemsRenderer, forwardIconRenderer, treeContainerRenderer: TreeContainer = TreeContainerRenderer, + customItemsRenderer, selectedItem } = props; @@ -94,20 +95,30 @@ const Tree = props => { inputIconRenderer={inputIconRenderer} clearIconRenderer={clearIconRenderer} /> - - {leaves && - leaves.length > 0 && - leaves.map(item => ( - - ))} - + {customItemsRenderer ? ( + React.cloneElement(customItemsRenderer, { + leaves, + searchTerm, + onClick, + selectedItem, + forwardIconRenderer + }) + ) : ( + + {leaves && + leaves.length > 0 && + leaves.map(item => ( + + ))} + + )} {leaves && leaves.length === 0 && (