https://github.com/dimuthruwantha/react-dualtreeviews-listbox

The list box include dynamically generated tree
https://github.com/dimuthruwantha/react-dualtreeviews-listbox

Last synced: 4 days 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:49:42.000Z (almost 2 years ago)
• Last Synced: 2024-11-15T03:16:56.358Z (5 days 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

[![NPM](https://img.shields.io/npm/v/react-dualtreeviews-listbox.svg)](https://www.npmjs.com/package/react-dualtreeviews-listbox) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![Node.js CI](https://github.com/DimuthRuwantha/react-dualtreeviews-listbox/workflows/Node.js%20CI/badge.svg)

## 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)