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}
/>