react-tree-multi-selector
Installation
$ npm i react-tree-multi-selector
Usage
; const App = { return <ReactTreeMultiSelector categories=dummyCategories initialSelectedIds=dummyInitial exceptionIds=dummyExceptions notSelectionIds=dummyNotSelections handleSelectedCategories=dummySelectedCategoryCallback /> }
Dummy data
// dummyData.jsconst dummyCategories = id: 1 title: '1' subCategory: id: 11 title: '1-1' subCategory: id: 111 title: '1-1-1' id: 112 title: '1-1-2' id: 113 title: '1-1-3' id: 12 title: '1-2' subCategory: id: 121 title: '1-2-1' id: 122 title: '1-2-2' id: 2 title: '2' subCategory: id: 21 title: '2-1' subCategory: id: 211 title: '2-1-1' subCategory: id: 3 title: '3' subCategory: const dummyInitial = ;const dummyExceptions = ;const dummyNotSelections = ; const dummySelectedCategoryCallback = { console; console;}
Demo
Before select
After select
Types
Category
- id: number (unique key)
- title: string
- subCategory: Category[]
Props
Prop | Type | Default | Description |
---|---|---|---|
categories |
Category[] |
[] |
Category list |
initialIds |
number[] |
[] |
Initial selected category ids |
exceptionIds |
number[] |
[] |
Disable show category ids in tree |
notSelectionIds |
number[] |
[] |
Disable select category ids in tree |
selectedCategoriesCallback |
function |
(selectedIdListOnlyParent, selectedIdList) => {} |
selectedIdListOnlyParent : Selected category id list only parent selectedIdList : Selected all category id list |
Licence
[MIT]