{"id":23299383,"url":"https://github.com/cyberlight/react-typeahead2","last_synced_at":"2025-08-22T04:30:34.147Z","repository":{"id":57346812,"uuid":"76622191","full_name":"CyberLight/react-typeahead2","owner":"CyberLight","description":"Typeahead React component ES6","archived":false,"fork":false,"pushed_at":"2017-01-13T11:10:11.000Z","size":496,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-11T20:39:53.253Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CyberLight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-16T04:46:25.000Z","updated_at":"2017-01-12T05:47:45.000Z","dependencies_parsed_at":"2022-08-25T18:50:15.137Z","dependency_job_id":null,"html_url":"https://github.com/CyberLight/react-typeahead2","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberLight%2Freact-typeahead2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberLight%2Freact-typeahead2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberLight%2Freact-typeahead2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberLight%2Freact-typeahead2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CyberLight","download_url":"https://codeload.github.com/CyberLight/react-typeahead2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230554242,"owners_count":18244235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-20T08:17:05.154Z","updated_at":"2024-12-20T08:17:05.677Z","avatar_url":"https://github.com/CyberLight.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Typeahead2\n\n[![Jest tests count](https://img.shields.io/badge/jest-49%20tests-blue.svg)](https://travis-ci.org/CyberLight/react-typeahead2)\n[![Coverage Status](https://coveralls.io/repos/github/CyberLight/react-typeahead2/badge.svg?branch=master)](https://coveralls.io/github/CyberLight/react-typeahead2?branch=master)\n[![Build Status](https://travis-ci.org/CyberLight/react-typeahead2.svg?branch=master)](https://travis-ci.org/CyberLight/react-typeahead2)\n[![npm version](https://badge.fury.io/js/react-typeahead2.svg)](https://badge.fury.io/js/react-typeahead2)\n[![Build status](https://ci.appveyor.com/api/projects/status/1xl417l6f3u3eqlf?svg=true)](https://ci.appveyor.com/project/CyberLight/react-typeahead2)\n[![npm downloads](https://img.shields.io/npm/dm/react-typeahead2.svg?style=flat-square)](https://www.npmjs.com/package/react-typeahead2)\n[![Gitter Chat](http://img.shields.io/badge/chat-online-brightgreen.svg)](https://gitter.im/react-typeahead2)\n\n[![NPM](https://nodei.co/npm/react-typeahead2.png)](https://nodei.co/npm/react-typeahead2/)\n\n[![Code Climate](https://codeclimate.com/github/CyberLight/react-typeahead2/badges/gpa.svg)](https://codeclimate.com/github/CyberLight/react-typeahead2)\n[![Issue Count](https://codeclimate.com/github/CyberLight/react-typeahead2/badges/issue_count.svg)](https://codeclimate.com/github/CyberLight/react-typeahead2)\n[![Test Coverage](https://codeclimate.com/github/CyberLight/react-typeahead2/badges/coverage.svg)](https://codeclimate.com/github/CyberLight/react-typeahead2/coverage)\n\n[![Dependency Status](https://david-dm.org/CyberLight/react-typeahead2.svg)](https://david-dm.org/CyberLight/react-typeahead2)\n[![devDependencies Status](https://david-dm.org/CyberLight/react-typeahead2/dev-status.svg)](https://david-dm.org/CyberLight/react-typeahead2?type=dev)\n[![peerDependencies Status](https://david-dm.org/CyberLight/react-typeahead2/peer-status.svg)](https://david-dm.org/CyberLight/react-typeahead2?type=peer)\n\nReact Typeahead2 component like an Twitter typeahead\n\n[Storybook demo link](https://cyberlight.github.io/react-typeahead2/)\n\n* Like twitter Typeahead control\n\n### About Component\n\n#### Used\n\n* ```styled-components``` for embed css with React components\n* ```jest```, ```enzume```, ```webpack``` for testing purposes\n* ```React Storybook``` for developing control in browser with live demo\n\n#### You can\n\n* Manually show/hide spinner\n* Manually show/hide empty option item\n* Use ```onFetchData``` event for fetching data from server using value entered by user\n* Limit count of triggering ```onFetchData``` event, using ```rateLimitBy```, ```rateLimitWait```, ```minLength```\n\n### Component features\n\n#### Keyboard keys:\n\n* ```Esc``` - for hide expanded list of items\n* ```ArrowUp```, ```ArrowDown``` - for navigate by list items.\n* ```Enter``` - for selecting item from expanded list.\n* ```Tab```, ```End``` - for autocomplete item if hint displayed.\n\n#### Properties\n\n* ```optionTemplate``` - function template for render option item ```required```\n* ```displayKey``` - string name of field for displaying value after select option ```required```\n* ```emptyTemplate``` - function template for display empty option item ```optional```\n* ```loadingTemplate``` - function for displaying custom spinner template ```optional```\n* ```hint``` - bool value for enable/disable hint displaying ```optional``` (displayed only for LTR)\n* ```minLength``` - int value for min value (if input value length \u003e= ```minLength``` then trigger ```onFetchData``` event)\n* ```showLoading``` - bool flag for show/hide spinner\n* ```value``` - string value displaying in input element\n* ```className``` - for additional classes for input\n* ```options``` - list of option items (can be array of Objects or ```Immutable.List``` of ```Immutable.Record```)\n* ```rateLimitBy``` - string value of ```['none', 'trottle', 'debounce']``` for limit count ```onFetchData``` events\n* ```rateLimitWait``` - int value used for ```trottle``` and ```debounce```\n* ```showEmpty``` - flag for show/hide empty option item. (displayed only if no items in ```options``` property)\n* ```placeholder``` - string placeholder for displaying inside control\n\n#### Events\n\n* ```onChange``` - event handler which trigger when input value changed\n* ```onFetchData``` - event handler which depends on ```rateLimitBy```, ```rateLimitWait```, ```minLength```\n* ```onBlur``` - event handler for standard ```blur``` event of input\n* ```onOptionClick``` - event handler for handle choosing option from list\n* ```onOptionChange``` - event handler like ```onOptionClick```\n* ```onClick``` - event handler for standard click on input element\n\n#### Css classes\n\n* ```.rtex-option-container``` - class for options list container\n* ```.rtex-option-item``` - class for options item\n* ```.rtex-hint``` - class for hint input element\n* ```.rtex-input``` - class for input element\n\n### Example\n\n#### Simple usage Example\n\n```\nimport Typeahead from 'react-typeahead2';\n\nconst OptionTemplate = props =\u003e {\n  const getStyles = (selected) =\u003e {\n    if (selected) {\n      return {textAlign: 'left', backgroundColor: 'blue', color: 'white'};\n    }\n    return {textAlign: 'left'};\n  };\n  return (\u003cdiv style={getStyles(props.selected)}\u003e{`Id: ${props.data.id} - Name: ${props.data.name}`}\u003c/div\u003e);\n};\n\n// .... some code here\n\u003cdiv style={{width: '180px', margin: '0 auto'}}\u003e\n  \u003cTypeahead\n    value=\"\"\n    options={[{id:1, name:'name 1'}, {id:2, name: 'name 2'}]}\n    displayKey=\"name\"\n    optionTemplate={OptionTemplate}\n  /\u003e\n\u003c/div\u003e\n// .... some code here\n```\n\n#### Bootstrap 3 styling example\n\n```Css\n.rtex-option-container {\n    min-width: 160px;\n    margin-top: 2px;\n    padding: 5px 0;\n    background-color: #fff;\n    border: 1px solid #ebebeb;\n    -webkit-background-clip: padding-box;\n    -moz-background-clip: padding;\n    background-clip: padding-box;\n    width: 100%;\n    overflow-y: auto;\n    max-height: 250px;\n}\n\n.rtex-option-item {\n  border-top: inherit;\n}\n\n.rtex-hint {\n  background-color: white;\n}\n\n.rtex-input {\n  position: relative;\n  background-color: transparent;\n  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);\n}\n```\n\n#### Like Twitter typeahead styling example\n\n```Css\n.TwitterStylePage {\n  background-color: #f2f9ff;\n  font: normal normal normal 18px/1.2 \"Helvetica Neue\", Roboto, \"Segoe UI\", Calibri, sans-serif;\n  color: #292f33;\n}\n\n.TwitterStylePage .rtex-hint, .TwitterStylePage .rtex-input {\n  width: 100%;\n  padding: 5px 8px;\n  font-size: 24px;\n  line-height: 30px;\n  border: 1px solid #024e6a;\n  -webkit-border-radius: 8px;\n  -moz-border-radius: 8px;\n  border-radius: 8px;\n}\n\n.TwitterStylePage .rtex-input {\n  position: relative;\n  background-color: transparent;\n  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);\n  outline: none;\n}\n\n.TwitterStylePage .rtex-container {\n  position: relative;\n  width: 500px;\n  margin: 50px auto 0 auto;\n  padding: 15px;\n  text-align: left;\n  background-color: #0097cf;\n  background-image: -moz-linear-gradient(top, #04a2dd, #03739c);\n  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04a2dd), to(#03739c));\n  background-image: -webkit-linear-gradient(top, #04a2dd, #03739c);\n  background-image: -o-linear-gradient(top, #04a2dd, #03739c);\n  background-image: linear-gradient(top, #04a2dd, #03739c);\n  background-repeat: repeat-x;\n  border: 1px solid #024e6a;\n  -webkit-border-radius: 10px;\n  -moz-border-radius: 10px;\n  border-radius: 10px;\n  -webkit-box-shadow: 0 0 2px #111;\n  -moz-box-shadow: 0 0 2px #111;\n  box-shadow: 0 0 2px #111;\n}\n\n.TwitterStylePage .rtex-container *,\n.TwitterStylePage .rtex-container *::after,\n.TwitterStylePage .rtex-container *::before {\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n.TwitterStylePage .rtex-option-container {\n    position: absolute;\n    top: 95%;\n    left: 2.5%;\n    z-index: 100;\n    width: 95%;\n    margin-bottom: 20px;\n    overflow: hidden;\n    background-color: #fff;\n    -webkit-border-radius: 8px;\n    -moz-border-radius: 8px;\n    border-radius: 8px;\n    box-shadow: 0px 0px 0px 1px green;\n    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);\n    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);\n    box-shadow: 0 5px 10px rgba(0,0,0,.2);\n}\n\n.TwitterStylePage .EmptyItem {\n  position: relative;\n  padding: 10px;\n  font-size: 24px;\n  line-height: 30px;\n  text-align: center;\n}\n```\n\n### Contributing\n\n* See ```CONTRIBUTING.md```\n\n### License\n\n* See ```LICENSE```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyberlight%2Freact-typeahead2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyberlight%2Freact-typeahead2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyberlight%2Freact-typeahead2/lists"}