react-hierarchical-select

---

Overview

This project is a fork of react-dropdown-tree-select by @dowjones with some features added:

• Search highlighting
• Singular select (no tag-based selections)
• Support for prepending a component to the dropdown
• Logic for node traversal/expansion/collapse
• Support for hover events on nodes
• Changes to how nodes are selected

Please note: this project has been extended to a specific use case.
Your mileage may vary.

Getting Started

Please follow the instructions on the react-dropdown-tree-select Github page.

Usage

As noted above, this library extends the existing feature set of react-dropdown-tree-select, with the following properties and associated functionality added:

Prop	Value	Description
prependElement	Any valid JSX element	This allows for pre-pending an element to the top of the dropdown component (first child of the .root element).
enforceSingleSelection	boolean	When selected, will allow for only selecting a single element (as opposed to the tag-based selection bundled with this library by default)
highlightSearch	boolean	Enables phrase matching/highlighting on search
onNodeHover	function	Provides a callback for mouseover events on individual nodes
onInputChange	function	Provides a callback for when the search's input changes

Example usage:

import HierarchicalSelect from 'react-hierarchical-select';

<HierarchicalSelect
  mode="hierarchical"
  showDropdown="always"
  data={menuItems}
  prependElement={
   <div>Foo</div>
  }
  enforceSingleSelection={true}
  highlightSearch={true}
  onChange={this.onChange}
  onNodeHover={this.onNodeHover}
  onInputChange={this.onInputChange}
  onNodeNavigate={this.onNodeNavigate}  
  value={this.props.selected}
/>