react-inputpicker v1.0.2-beta
React Input Picker
Note:
(This is a beta realese of this package and may contain some bugs. please for now refrain from using it in production)
A simple Input picker for React with listing and selection. Future enhancements will include custom listing so that the user can apply custom styling to options and dropdown.
The Screenshot attached above is the sample when there is dropdown: Enabled, remove-control: Enabled and having the control-width default to 1.
The data that you want to show in the dropdown can be passed in data prop into the input picker.
<InputPickerComponent data={dropdownData} />You can also pass the filterFunction which you want to apply when the user types into the input field and show in the dropdown accordingly. The default function that will be happening will be a text search as the user types in.
<InputPickerComponent filterFunction={this.onUserInput} />If you wish to disable all the controls and make it a simple input field you can do the following:
Pass the disableControls prop as true so that it becomes a simple input dropdown.
<InputPickerComponent disableControls={true} />
If you wish to just disable the remove icon from the input pass the disableRemove prop as true so the there is no remove icon.
<InputPickerComponent disableRemove={true} />
If you wish to disable the dropdown on the input field pass the disableDropdown prop as true.
<InputPickerComponent disableDropdown={true} />You can also change the width of the controls showing on the input by passing the prop controlWidth with your desired value the default value is 1
<InputPickerComponent controlWidth={3} />
Properties
| Property | type | params | Function |
|---|---|---|---|
| data | Array of objects | { label: "Text1", value: "Text1" } | To pass the data into the input picker |
| filterFunction | Function | fn(value:String, data:Array, options:Object) | Filter function that you want to apply on the data. (optional) Default: Will do a text search. |
| filterOptions | Object | {trim: true, strictMatch: false, exactMatch: false} | Filter function options that you can override. |
| disableControls | Boolean | - | Disables all the controls and make it the simple input field. (optional)boolean: true/false Default: false |
| disableDropdown | Boolean | Disables showing the dropdown. (optional)boolean: true/false Default: false | |
| disableRemove | Boolean | Disables showing the remove icon. (optional)boolean: true/false Default: false | |
| controlWidth | Number | 1 to 12 | Sets the width of the control as required (optional)Number: 1/2/3 Default: 1 |