Skip to content

Latest commit

 

History

History
82 lines (69 loc) · 5.19 KB

README.md

File metadata and controls

82 lines (69 loc) · 5.19 KB
Raw

react-select-input

Travis npm package GitHub license

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.