r-picker-cascader

react-picker-cascader

React Picker Cascader Dropdown

Installation

npm install --save r-picker-cascader

How to Use

import PickerCascader from "r-picker-cascader";

<PickerCascader
            style={{ width: "15rem" }}
            placeHolder={"City"}
            data={[
              {
                key: "1",
                text: "Australia",
                children: [
                  {
                    key: "2",
                    text: "New South Wales",
                    children: [
                      { key: "3", text: "Sydney" },
                      { key: "4", text: "Wollongong" }
                    ]
                  },
                  {
                    key: "5",
                    text: "Victoria",
                    children: [
                      { key: "6", text: "Melbourne" },
                      { key: "7", text: "Geelong" }
                    ]
                  }
                ]
              },
              {
                key: "10",
                text: "Canada",
                children: [
                  {
                    key: "11",
                    text: "Alberta",
                    children: [
                      { key: "12", text: "Calgary" },
                      { key: "13", text: "Brooks" }
                    ]
                  },
                  {
                    key: "14",
                    text: "British Columbia",
                    children: [
                      { key: "15", text: "Vancouver" },
                      { key: "16", text: "Vernon" }
                    ]
                  }
                ]
              },
              {
                key: "20",
                text: "United States",
                children: [
                  {
                    key: "21",
                    text: "New York",
                    children: [
                      { key: "22", text: "Albany" },
                      { key: "23", text: "Norwich" }
                    ]
                  },
                  {
                    key: "24",
                    text: "Pennsylvania",
                    children: [
                      { key: "25", text: "Farrell" },
                      { key: "26", text: "Parker" }
                    ]
                  }
                ]
              }
            ]}
            onValueSelected={item => setCity(item)}
          />

https://picker-cascader-demo.herokuapp.com

props

prop	Description
data	Datasource for control, JavaScript object, if you want to bind json use json.Parse() to convert to JS object
onValueSelected	Event, will give you selected item, key as '~' separated and values as | separated

npm

https://www.npmjs.com/package/r-picker-cascader

Developed By

Asif Sharif

License

MIT