# react-hierarchical-select

> An extended/hierarchical dropdown library based on react-dropdown-tree-select

Latest version **0.1.22** (published 2020-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hierarchical-select
pnpm add react-hierarchical-select
yarn add react-hierarchical-select
bun add react-hierarchical-select
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.22 |
| Published | 2020-03-24 |
| First published | 2019-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | SPAN Digital |
| Maintainers | span.digital |
| Keywords | react, tree-select, dropdown, dropdown-tree-select, react-dropdown-tree-select, checkbox-tree, checkbox-select, checkbox-tree-select, checkbox-dropdown-tree-select, fast, customizable, lightweight, searchable, search |

## Links

- npm: https://www.npmjs.com/package/react-hierarchical-select
- Repository: https://github.com/SPANDigital/react-hierarchical-select
- Homepage: https://github.com/SPANDigital/react-hierarchical-select#readme
- Issues: https://github.com/SPANDigital/react-hierarchical-select/issues
- npm.io page: https://npm.io/package/react-hierarchical-select

## Dependencies (3)

- [memoize-one](https://npm.io/package/memoize-one.md) 4.0.0
- [array.partial](https://npm.io/package/array.partial.md) ^1.0.5
- [react-infinite-scroll-component](https://npm.io/package/react-infinite-scroll-component.md) ^4.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.22 (latest) — 2020-03-24
- 0.1.21 — 2020-03-19
- 0.1.20 — 2020-03-17
- 0.1.19 — 2020-03-16
- 0.1.18 — 2020-02-27
- 0.1.17 — 2020-02-20
- 0.1.16 — 2020-02-20
- 0.1.15 — 2020-02-19
- 0.1.14 — 2020-02-19
- 0.1.13 — 2020-02-18
- 0.1.12 — 2020-02-18
- 0.1.11 — 2020-02-13
- 0.1.10 — 2020-01-28
- 0.1.9 — 2020-01-23
- 0.1.8 — 2019-12-08
- … 10 more at https://npm.io/package/react-hierarchical-select/versions

## README

# react-hierarchical-select

---

# Overview

This project is a fork of [react-dropdown-tree-select](https://github.com/dowjones/react-dropdown-tree-select) by [@dowjones](https://github.com/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](https://github.com/dowjones/react-dropdown-tree-select) Github page.

# Usage

As noted above, this library extends the existing feature set of [react-dropdown-tree-select](https://github.com/dowjones/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:

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

---
_Source: https://npm.io/package/react-hierarchical-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._