React Dropdown Tree Select Library: A Comprehensive Guide | AV Coding
Hey guys welcome to AV Coding
Today, we will delve into how to integrate the react-dropdown-tree-select library into our React code.
NPM REPO: https://www.npmjs.com/package/react-dropdown-tree-select?activeTab=readme
npm i react-dropdown-tree-select --saveApp.js
import logo from "./logo.svg";
import DropdownTreeSelect from "react-dropdown-tree-select";
import "react-dropdown-tree-select/dist/styles.css";
import "./App.css";
function App() {
const data = [
{
label: "Ahmedabad", //required
value: "Ahmedabad",
className: "Ahmedabad_Test",
checked: false,
disabled: false,
expanded: false,
customData: {
"key": "value"
},
children: [
{
label: "Colleges",
checked: false,
disabled: false,
children: [
{
label: "Nirma University",
checked: false,
disabled: false,
children: []
},
{
label: "Ahmedabad Institute Of Technology",
checked: false,
disabled: false,
},
{
label: "Gujarat Technological University",
checked: false,
disabled: false,
},
],
},
{
label: "Places To Visit",
children: [
{
label: "Kankaria Lake",
checked: false,
disabled: false,
},
{
label: "Science City",
checked: false,
disabled: false,
},
{
label: "River Front",
checked: false,
disabled: false,
},
],
},
],
},{
label: "Pune",
checked: false,
disabled: false,
children: [
{
label: "Colleges",
checked: false,
disabled: false,
children: [
{
label: "Flame University",
checked: false,
disabled: false,
},
{
label: "Gokhale Institute of Politics and Economics",
checked: false,
disabled: false,
},
{
label: "SCMLD, Sadhana Centre for Management & Leadership Development",
checked: false,
disabled: false,
},
],
},
{
label: "Places To Visit",
checked: false,
disabled: false,
children: [
{
label: "Lohagad Fort",
checked: false,
disabled: false,
},
{
label: "Sinhagad Fort",
checked: false,
disabled: false,
},
{
label: "Shaniwar Wada",
checked: false,
disabled: false,
},
],
},
],
},
];
const onChange = (currentNode, selectedNodes) => {
console.log("onChange::", currentNode, selectedNodes);
};
const onNodeToggle = (currentNode) => {
console.log("onNodeToggle::", currentNode);
};
const onFocus = () => {
console.log("onFocus Triggered");
};
const onBlur = () => {
console.log("onBlur Triggered");
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p className="white-color">
How to configure react-dropdown-tree-select
</p>
<a
className="App-link"
href="https://ashutoshviramgama.com"
target="_blank"
rel="noopener noreferrer"
>
AV Coding
</a>
</header>
<div className="dropDown">
<DropdownTreeSelect
texts={
{
placeholder: "Testing react-dropdown-tree-select",
inlineSearchPlaceholder: "this is search",
noMatches: "Nothing Matches",
}
}
keepTreeOnSearch={true}
inlineSearchInput={true}
clearSearchOnChange={true}
keepOpenOnSelect={true}
showPartiallySelected={true}
readOnly={false}
disabled={false}
data={data} //required
onChange={onChange}
onNodeToggle={onNodeToggle}
onFocus={onFocus}
onBlur={onBlur}
className="bootstrap-demo"
mode="radioSelect" // simpleSelect/multiSelect/radioSelect/hierarchical
// showDropdown="always" // initial/always
disablePoppingOnBackspace={true}
/>
</div>
</div>
);
}
export default App;App.css
.App-logo {
height: 8vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}
.white-color {
color: white;
}
.App-link {
color: #61dafb;
}
.dropDown {
margin-top: 20px;
margin-left: 40%;
}
/* .bootstrap-demo .dropdown-trigger {
border-radius: 0.25rem;
}
.bootstrap-demo .dropdown-trigger > span:after {
font-size: 12px;
color: #555;
}
.bootstrap-demo .toggle {
font: normal normal normal 12px/1 FontAwesome;
color: #555;
}
.bootstrap-demo .toggle.collapsed::after {
content: "\f067";
}
.bootstrap-demo .toggle.expanded::after {
content: "\f068";
}
.bootstrap-demo .root {
padding: 0px;
margin: 0px;
} */Hope You Liked This Blog. Share, Comment, Subscribe for More Code Feeds
0 Comments
