React Typeahead2
React Typeahead2 component like an Twitter typeahead
- Like twitter Typeahead control
About Component
Used
styled-components
for embed css with React componentsjest
,enzume
,webpack
for testing purposesReact Storybook
for developing control in browser with live demo
You can
- Manually show/hide spinner
- Manually show/hide empty option item
- Use
onFetchData
event for fetching data from server using value entered by user - Limit count of triggering
onFetchData
event, usingrateLimitBy
,rateLimitWait
,minLength
Component features
Keyboard keys:
Esc
- for hide expanded list of itemsArrowUp
,ArrowDown
- for navigate by list items.Enter
- for selecting item from expanded list.Tab
,End
- for autocomplete item if hint displayed.
Properties
optionTemplate
- function template for render option itemrequired
displayKey
- string name of field for displaying value after select optionrequired
emptyTemplate
- function template for display empty option itemoptional
loadingTemplate
- function for displaying custom spinner templateoptional
hint
- bool value for enable/disable hint displayingoptional
(displayed only for LTR)minLength
- int value for min value (if input value length >=minLength
then triggeronFetchData
event)showLoading
- bool flag for show/hide spinnervalue
- string value displaying in input elementclassName
- for additional classes for inputoptions
- list of option items (can be array of Objects orImmutable.List
ofImmutable.Record
)rateLimitBy
- string value of['none', 'trottle', 'debounce']
for limit countonFetchData
eventsrateLimitWait
- int value used fortrottle
anddebounce
showEmpty
- flag for show/hide empty option item. (displayed only if no items inoptions
property)placeholder
- string placeholder for displaying inside control
Events
onChange
- event handler which trigger when input value changedonFetchData
- event handler which depends onrateLimitBy
,rateLimitWait
,minLength
onBlur
- event handler for standardblur
event of inputonOptionClick
- event handler for handle choosing option from listonOptionChange
- event handler likeonOptionClick
onClick
- event handler for standard click on input element
Css classes
.rtex-option-container
- class for options list container.rtex-option-item
- class for options item.rtex-hint
- class for hint input element.rtex-input
- class for input element
Example
Simple usage Example
import Typeahead from 'react-typeahead2';
const OptionTemplate = props => {
const getStyles = (selected) => {
if (selected) {
return {textAlign: 'left', backgroundColor: 'blue', color: 'white'};
}
return {textAlign: 'left'};
};
return (<div style={getStyles(props.selected)}>{`Id: ${props.data.id} - Name: ${props.data.name}`}</div>);
};
// .... some code here
<div style={{width: '180px', margin: '0 auto'}}>
<Typeahead
value=""
options={[{id:1, name:'name 1'}, {id:2, name: 'name 2'}]}
displayKey="name"
optionTemplate={OptionTemplate}
/>
</div>
// .... some code here
Bootstrap 3 styling example
.rtex-option-container { min-width: 160px; margin-top: 2px; padding: 5px 0; background-color: #fff; border: 1px solid #ebebeb; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; width: 100%; overflow-y: auto; max-height: 250px;} .rtex-option-item { border-top: inherit;} .rtex-hint { background-color: white;} .rtex-input { position: relative; background-color: transparent; background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
Like Twitter typeahead styling example
.TwitterStylePage { background-color: #f2f9ff; font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif; color: #292f33;} .TwitterStylePage .rtex-hint, .TwitterStylePage .rtex-input { width: 100%; padding: 5px 8px; font-size: 24px; line-height: 30px; border: 1px solid #024e6a; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .TwitterStylePage .rtex-input { position: relative; background-color: transparent; background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); outline: none;} .TwitterStylePage .rtex-container { position: relative; width: 500px; margin: 50px auto 0 auto; padding: 15px; text-align: left; background-color: #0097cf; background-image: -moz-linear-gradient(top, #04a2dd, #03739c); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04a2dd), to(#03739c)); background-image: -webkit-linear-gradient(top, #04a2dd, #03739c); background-image: -o-linear-gradient(top, #04a2dd, #03739c); background-image: linear-gradient(top, #04a2dd, #03739c); background-repeat: repeat-x; border: 1px solid #024e6a; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 2px #111; -moz-box-shadow: 0 0 2px #111; box-shadow: 0 0 2px #111;} .TwitterStylePage .rtex-container *,.TwitterStylePage .rtex-container *::after,.TwitterStylePage .rtex-container *::before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .TwitterStylePage .rtex-option-container { position: absolute; top: 95%; left: 2.5%; z-index: 100; width: 95%; margin-bottom: 20px; overflow: hidden; background-color: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; box-shadow: 0px 0px 0px 1px green; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2);} .TwitterStylePage .EmptyItem { position: relative; padding: 10px; font-size: 24px; line-height: 30px; text-align: center;}
Contributing
- See
CONTRIBUTING.md
License
- See
LICENSE