# @point-api/dropdown-react

> HOC to add a Point API autocomplete dropdown

Latest version **1.1.26** (published 2019-12-02) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @point-api/dropdown-react
pnpm add @point-api/dropdown-react
yarn add @point-api/dropdown-react
bun add @point-api/dropdown-react
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.26 |
| Published | 2019-12-02 |
| First published | 2018-08-04 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 92.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Iansiti |
| Maintainers | agski, alex.iansiti, kuczynski, lambertchu |
| Keywords | Point API, Point, autocomplete, completion |

## Links

- npm: https://www.npmjs.com/package/@point-api/dropdown-react
- Repository: https://github.com/PointMail/dropdown-react
- Homepage: https://docs.pointapi.com
- Issues: https://github.com/PointMail/dropdown-react/issues
- npm.io page: https://npm.io/package/@point-api/dropdown-react

## Dependencies (5)

- [clsx](https://npm.io/package/clsx.md) 1.0.4
- [textarea-caret](https://npm.io/package/textarea-caret.md) 3.1.0
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) 4.5.0
- [@point-api/js-sdk](https://npm.io/package/@point-api/js-sdk.md) 1.1.39
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) 4.4.3

## Recent versions

- 1.1.26 (latest) — 2019-12-02
- 0.0.0-dev.0ba3e3c (dev) — 2019-12-02
- 0.0.0-dev.6fa078b — 2019-11-21
- 1.1.25 — 2019-11-21
- 0.0.0-dev.4accd03 — 2019-11-21
- 0.0.0-dev.3612b82 — 2019-11-21
- 0.0.0-dev.a4b3871 — 2019-11-21
- 0.0.0-dev.6bf90bd — 2019-11-20
- 0.0.0-dev.8864ba0 — 2019-11-20
- 0.0.0-dev.5f7f479 — 2019-11-13
- 1.1.24 — 2019-11-08
- 0.0.0-dev.d81c4f1 — 2019-11-08
- 0.0.0-dev.3c5628f — 2019-11-05
- 0.0.0-dev.80b716b — 2019-11-05
- 0.0.0-dev.3fb9b51 — 2019-11-05
- … 38 more at https://npm.io/package/@point-api/dropdown-react/versions

## README

# Point API React Dropdown

> HOC that easily gives a ContentEditable, TextArea, or Input an autocomplete dropdown powered by Point API  

[![npm](https://img.shields.io/npm/dt/@point-api/dropdown-react.svg)](https://www.npmjs.com/package/@point-api/dropdown-react)
[![Build Status](https://travis-ci.com/PointMail/dropdown-react.svg?token=SmMvuZyqpJ8e2tdWxqRV&branch=master)](https://travis-ci.com/PointMail/dropdown-react)

## Usage

Create a component with a contentEditable div, textarea, or input(type=text). ie:

```js
function contentEditableComponent() {
  return <div contentEditable={true} />;
}
function textAreaComponent() {
  return <textarea />;
}
function inputComponent() {
  return <input type="text" />;
}
```

Wrap this component in the `addDropdown` HOC:

```js
const AutoCompleteEditable = addDropdown(contentEditable, {
  dropdownClass: "bg-info",
  suggestionClass: "text-center"
});
```

Render like a normal component!

```js
...
render(){
  return <AutoCompleteEditable />
}
...
```

## API Reference

### addDropdown(Editable: *`React.ComponentType`<`P`>*): `AutoComplete`

Attach a Point dropdown to a given Editable component  
*Note: `P` represents the component parameter's original props*

**Parameters:**

| Param    | Type                       | Description                                                                     |
| -------- | -------------------------- | ------------------------------------------------------------------------------- |
| Editable | `React.ComponentType`<`P`> | A component containing a ContentEditable, TextArea, or Input(type=text) element |
| options  | `AutoCompleteOptions`      | Additional options to pass to the dropdown                                      |

**Returns:** `AutoComplete`
An Autocomplete component containing the editable with the attached dropdown  

---

### Interface: AutoCompleteOptions

#### `<Optional>` dropdownClass

**● dropdownClass**: `string`

Class passed to Dropdown component

#### `<Optional>` suggestionClass

**● suggestionClass**: `string`

Class passed to each dropdown suggestion

## Deployment

This library is deployed to [npmjs.com](https://www.npmjs.com/package/@point-api/dropdown-react).

Travis CI pipeline is configured to release any code from **master** branch.
By default the package version is automatically incremented like a patch
(e.g. from v0.8.1 to v0.8.2). A git tag for corresponding release is created
and can be seen [here](https://github.com/PointMail/dropdown-react/releases).

### Deployment steps

- Before merging to **master** make sure that previous release was merged
  to **master**. This means that *package.json* has the same version as
  *latest* in [npmjs.com](https://www.npmjs.com/package/@point-api/dropdown-react).
- If versions differ, look for a git tag for the latest release (e.g. v1.1.23)
  and include it in the PR.
- Now you can merge to **master** and a new release should be deployed
  to **npmjs.com**.
- If you forget to include latest version, your release will fail. The
  easiest fix is to create another PR that only includes skipped version
  changes from version tag (e.g. v1.1.23).
  After merging in, a new release should be pushed to npmjs.com including
  all new changes.

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