1.0.8 • Published 16 days ago
react-select-input-v2 v1.0.8
react-select-input
A simple combination of traditional HTML5 input and select.
v2 underway!
I've left this project inactive for way too long (v1.0.0 was launched a year after initial release!). Going through the code, there are a lot of stuff that could be improved. For all the users, the entire project will undergo a complete rewrite. Many of these changes will be breaking, leading up to the release of v2.
Head over to the Version 2 thread to know more and discuss!
Props Overview
InputSelect.defaultProps = {
uniqueKey: 'react-select-input', //String
style: null, //Object
value: '', //String
valueKey: 'value', //String
labelKey: 'label', //String
placeholder: 'Enter text', //String
className: '', //String
openUp: false, //Boolean
disableEnter: true, //Boolean
collapseOnBlur: true, //Boolean
collapseOnEscape: true, //Boolean
collapseOnSelect: true, //Boolean
autoFocus: true, //Boolean
clearable: true, //Boolean - NO EFFECT
options: [], //Array
onSelect: undefined, //Function (option)
onClear: undefined, // Function
onChange: undefined, //Function (event)
onFocus: undefined, //Function (event)
onBlur: undefined, //Function (event)
onKeyUp: undefined, //Function (event)
onKeyDown: undefined, //Function (event)
noOptions: undefined //JSX
};Options
| Prop | Type | Default |
|---|---|---|
| uniqueKey | String | "react-select-input" Unique key for the component. |
| style | Object | null Any custom inline styles that need to be passed. |
| value | String | "" The value to either populate or control the component. |
| valueKey | String | "value" The key from your options which you want to use as the value key. Should be unique. |
| labelKey | String | "label" The key from your options for pretty display of options. |
| placeholder | String | "Enter text" Placeholder for input. |
| className | String | "" Custom classes apart from the default classes to the wrapper. |
| openUp | Boolean | false Whether the select should work as a dropup or dropdown. |
| disableEnter | Boolean | true If the default return key behaviour should be preserved. |
| collapseOnBlur | Boolean | true Clicking outside the ref should collapse the select. |
| collapseOnEscape | Boolean | true While focused, hitting Escape collapse the select. |
| collapseOnSelect | Boolean | true Upon selection collapses the select. |
| autoFocus | Boolean | true On mount, focus the input field. |
| clearable | Boolean | true Show an icon to clear the entire select. |
| options | Array | [ ] Array of options to use while rendering the list. |
| noOptions | JSX | undefined JSX to render when no option matches search. |
Methods
| Prop | Parameters | Description |
|---|---|---|
| onChange | event | Synthetic event of the input upon change. |
| onSelect | option | The selected option.Gets triggered during both clicking and arrow navigation selection. |
| onFocus | event | Synthetic event of the input upon focus. |
| onBlur | event | Synthetic event of the input upon blur. Native function passed. |
| onKeyUp | event | Synthetic event of the input upon keyUp. |
| onKeyDown | event | Synthetic event of the input upon keyDown. |
| onClear | none | A callback after clear if clearable. |
Copyright © 2018.