https://github.com/dimuthruwantha/react-dualtreeviews-listbox
The list box include dynamically generated tree
https://github.com/dimuthruwantha/react-dualtreeviews-listbox
Last synced: 4 months ago
JSON representation
The list box include dynamically generated tree
- Host: GitHub
- URL: https://github.com/dimuthruwantha/react-dualtreeviews-listbox
- Owner: DimuthRuwantha
- Created: 2020-05-02T17:07:34.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:49:42.000Z (over 2 years ago)
- Last Synced: 2025-03-06T16:18:29.027Z (4 months ago)
- Language: JavaScript
- Size: 5.17 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-dualtreeviews-listbox
> The list box include dynamically generated tree
[](https://www.npmjs.com/package/react-dualtreeviews-listbox) [](https://standardjs.com)
## Install
```bash
npm install --save react-dualtreeviews-listbox
```
## Prerequisites
add Bootstrap4 for styling
```
```
Demo
https://codesandbox.io/s/dual-list-box1-w16yw
## Usage
```jsx
import React from 'react'
import { DualTreeViewListBox } from 'react-dualtreeviews-listbox'
import 'react-dualtreeviews-listbox/dist/index.css'
var data = [{
"title": "Sri Lanka",
"id": "1",
"parentNode": null,
"childNodes": [{
"title": "Western Province",
"id": "11",
"parentNode": "1",
"childNodes": [{
"title": "Colombo District",
"id": "111",
"parentNode": "11",
"childNodes": [],
},{
"title": "Gampaha District",
"id": "112",
"parentNode": "11",
"childNodes": [],
},{
"title": "Kaluthara District",
"id": "113",
"parentNode": "11",
"childNodes": [],
}],
},
{
"title": "Central Province",
"id": "12",
"parentNode": "1",
"childNodes": [{
"parentNode": "12",
"childNodes": [],
"title": "Kandy",
"id": "121"
}],
}],
},
{
"title": "India",
"id": "2",
"childNodes": [{
"title": "Maharashtra",
"id": "21",
"parentNode": "2",
"childNodes": [{
"title": "Pune",
"id": "211",
"parentNode": "21",
"childNodes": [],
}],
}],
}]
const App = () => {
const [selectedTree, setTree] = useState([])
return
setTree(list)} />
{JSON.stringify(selectedTree, undefined, 2)}
}
export default App
```
## License
MIT © [DimuthRuwantha](https://github.com/DimuthRuwantha)