Skip to content

Commit

Permalink
Merge pull request #42 from HubSpot/fix-create-tag-again
Browse files Browse the repository at this point in the history
Merge Creatable updates from upstream
  • Loading branch information
TrevorBurnham authored Oct 25, 2016
2 parents 40da517 + fb9da64 commit e7302ba
Show file tree
Hide file tree
Showing 27 changed files with 2,374 additions and 981 deletions.
24 changes: 23 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ It decorates a `Select` and so it supports all of the default properties (eg sin
The easiest way to use it is like so:

```js
import { Creatable } from 'react-select';
import { Creatable } from 'react-select-plus';

function render (selectProps) {
return <Creatable {...selectProps} />;
Expand All @@ -209,10 +209,31 @@ function render (selectProps) {

Property | Type | Description
:---|:---|:---
`children` | function | Child function responsible for creating the inner Select component. This component can be used to compose HOCs (eg Creatable and Async). Expected signature: `(props: Object): PropTypes.element` |
`isOptionUnique` | function | Searches for any matching option within the set of options. This function prevents duplicate options from being created. By default this is a basic, case-sensitive comparison of label and value. Expected signature: `({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean` |
`isValidNewOption` | function | Determines if the current input text represents a valid option. By default any non-empty string will be considered valid. Expected signature: `({ label: string }): boolean` |
`newOptionCreator` | function | Factory to create new option. Expected signature: `({ label: string, labelKey: string, valueKey: string }): Object` |
`promptTextCreator` | function | Creates prompt/placeholder option text. Expected signature: `(filterText: string): string`
`shouldKeyDownEventCreateNewOption` | function | Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. ENTER, TAB and comma keys create new options by dfeault. Expected signature: `({ keyCode: number }): boolean` |
`promptTextCreator` | function | Factory for overriding default option creator prompt label. By default it will read 'Create option "{label}"'. Expected signature: `(label: String): String` |

### Combining Async and Creatable

Use the `AsyncCreatable` HOC if you want both _async_ and _creatable_ functionality.
It ties `Async` and `Creatable` components together and supports a union of their properties (listed above).
Use it as follows:

```jsx
import React from 'react';
import { AsyncCreatable } from 'react-select-plus';

function render (props) {
// props can be a mix of Async, Creatable, and Select properties
return (
<AsyncCreatable {...props} />
);
}
```

### Filtering options

Expand Down Expand Up @@ -307,6 +328,7 @@ function onInputKeyDown(event) {
Property | Type | Default | Description
:-----------------------|:--------------|:--------------|:--------------------------------
addLabelText | string | 'Add "{label}"?' | text to display when `allowCreate` is true
arrowRenderer | func | undefined | Renders a custom drop-down arrow to be shown in the right-hand side of the select: `arrowRenderer({ onMouseDown })`
autoBlur | bool | false | Blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices
autofocus | bool | undefined | autofocus the component on mount
autoload | bool | true | whether to auto-load the default async options set
Expand Down
Loading

0 comments on commit e7302ba

Please sign in to comment.