react-typeahead2
v1.0.10
Published
React Typeahead2
Downloads
23
Readme
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