DropDownTree

Updated on Aug 21, 2025

Represents the DropDownTree component.

Accepts properties of type DropDownTreeProps. Obtaining the ref returns an object of type DropDownTreeHandle.

A Functional Component.

jsx

const selectField = "selected";
const expandField = "expanded";
const dataItemKey = "id";
const textField = "text";
const subItemsField = "items";
const fields = {
 selectField,
 expandField,
 dataItemKey,
 subItemsField,
};
 const App = () => {
 const [value, setValue] = React.useState(null);
 const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
 const onChange = (event) => setValue(event.value);
 const onExpandChange = React.useCallback(
   (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
   [expanded]
 );
 const treeData = React.useMemo(
   () =>
     processTreeData(
       data,
       {
         expanded,
         value,
       },
       fields
     ),
   [expanded, value]
 );

 return (
     <DropDownTree
       style={{
         width: '300px',
       }}
       placeholder="Please select ..."
       data={treeData}
       value={value}
       onChange={onChange}
       textField={textField}
       dataItemKey={dataItemKey}
       selectField={selectField}
       expandField={expandField}
       onExpandChange={onExpandChange}
     />
 );
};

Name	Type	Default	Description
props	DropDownTreeProps intersected with RefAttributes<"null" | DropDownTreeHandle>		The props of the DropDownTree component.