# react-select-input > react-select-input React component Latest version **1.0.5** (published 2018-09-12) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install react-select-input pnpm add react-select-input yarn add react-select-input bun add react-select-input ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.0.5 | | Published | 2018-09-12 | | First published | 2017-09-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 211 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Samrith Shankar | | Maintainers | samrith | | Keywords | react-component, input, select, input select combo, select dropdown, custom select, searchable, searchable select, free input, free select | ## Links - npm: https://www.npmjs.com/package/react-select-input - Repository: https://github.com/samrith-s/react-select-input - Homepage: https://samrith-s.github.io/react-select-input - Issues: https://github.com/samrith-s/react-select-input/issues - npm.io page: https://npm.io/package/react-select-input ## Dependencies (2) - [prop-types](https://npm.io/package/prop-types.md) ^15.6.2 - [react-autosize-textarea](https://npm.io/package/react-autosize-textarea.md) ^0.4.8 ## Alternatives - [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads - [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads - [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads - [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads - [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads ## Recent versions - 1.0.5 (latest) — 2018-09-12 - 1.0.4 — 2018-08-23 - 1.0.3 — 2018-08-21 - 1.0.2 — 2018-08-21 - 1.0.1 — 2018-08-21 - 1.0.0 — 2018-08-21 - 0.1.1 — 2017-09-25 - 0.1.0 — 2017-09-21 - 0.0.6 — 2017-09-20 - 0.0.5 — 2017-09-20 - 0.0.4 — 2017-09-20 - 0.0.3 — 2017-09-20 - 0.0.2 — 2017-09-20 - 0.0.1 — 2017-09-20 ## README # react-select-input [![Travis](https://img.shields.io/travis/samrith-s/react-select-input/master.svg)][build] [![npm package](https://img.shields.io/npm/v/react-select-input.svg)][npm] [![GitHub license](https://img.shields.io/github/license/samrith-s/react-select-input.svg)][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](https://github.com/samrith-s/react-select-input/issues/2) to know more and discuss!** ### Props Overview ```javascript 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. [build]: https://travis-ci.org/samrith-s/react-select-input [npm]: https://www.npmjs.org/package/react-select-input [license]: https://github.com/samrith-s/react-select-input/blob/master/LICENSE --- _Source: https://npm.io/package/react-select-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._