Never-ending Pumpkin Mulch

    react-dualtreeviews-listbox

    1.0.1 • Public • Published

    react-dualtreeviews-listbox

    The list box include dynamically generated tree

    NPM JavaScript Style Guide

    Install

    npm install --save react-dualtreeviews-listbox

    Prerequisites

    add Bootstrap4 for styling

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    

    Usage

    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 <div>
      <DualTreeViewListBox data={data} onnodemoved={(list) => setTree(list)} />
      <pre>{JSON.stringify(selectedTree, undefined, 2)}</pre>
    </div>
    }
     
    export default App
     

    License

    MIT © DimuthRuwantha

    Install

    npm i react-dualtreeviews-listbox

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    65.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • dimru