Point API React Dropdown

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

Usage

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

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

Wrap this component in the addDropdown HOC:

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

Render like a normal component!

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

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.

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