Inspire from react-select and react-tree-dropdown.

Creating react-multi-style-dropdown-tree which will give two types for hirerarchy Vertical as well as horizontal.

Demo:

• Horizontal Style Tree Dropdown

• Vertical Style Tree Dropdown

• Render value outside the dropdown

• Adding custom props to search input

Install

npm i react-multi-style-dropdown-tree

USAGE

import ReactTreeDropdown, {
  OPTION_STYLE
} from "react-multi-style-dropdown-tree";
import "react-multi-style-dropdown-tree/lib/index.css";
import { OPTIONS } from "./DummyData";

export default function App() {
  const [selectedValues, setSelectedValues] = useState([]);

  return (
    <div className="App">
      <ReactTreeDropdown
        value={selectedValues}
        dropdownOptions={OPTIONS}
        handleValueChange={(selectedData) => {
          setSelectedValues(selectedData);
        }}
        optionStyle={OPTION_STYLE.VERTICAL}
        placeholder="Select Options"
      />
    </div>
  );
}