@point-api/dropdown-react/README.md

HOC to add a Point API autocomplete dropdown

# 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.