{"id":13422098,"url":"https://github.com/fmoo/react-typeahead","last_synced_at":"2025-05-15T12:06:10.525Z","repository":{"id":10495023,"uuid":"12677322","full_name":"fmoo/react-typeahead","owner":"fmoo","description":"Pure react-based typeahead and typeahead-tokenizer","archived":false,"fork":false,"pushed_at":"2020-07-25T09:44:39.000Z","size":1416,"stargazers_count":678,"open_issues_count":101,"forks_count":229,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-09T07:12:25.456Z","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":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fmoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-08T06:53:52.000Z","updated_at":"2025-03-16T17:17:31.000Z","dependencies_parsed_at":"2022-08-07T10:00:03.382Z","dependency_job_id":null,"html_url":"https://github.com/fmoo/react-typeahead","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmoo%2Freact-typeahead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmoo%2Freact-typeahead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmoo%2Freact-typeahead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmoo%2Freact-typeahead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fmoo","download_url":"https://codeload.github.com/fmoo/react-typeahead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337613,"owners_count":22054253,"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-07-30T23:00:36.852Z","updated_at":"2025-05-15T12:06:05.513Z","avatar_url":"https://github.com/fmoo.png","language":"JavaScript","readme":"# react-typeahead\n\n\u003e A typeahead/autocomplete component for React\n\nreact-typeahead is a javascript library that provides a react-based\ntypeahead, or autocomplete text entry, as well as a \"typeahead tokenizer\",\na typeahead that allows you to select multiple results.\n\n## Usage\n\nFor a typeahead input:\n\n```javascript\nvar Typeahead = require('react-typeahead').Typeahead;\nReact.render(\n  \u003cTypeahead\n    options={['John', 'Paul', 'George', 'Ringo']}\n    maxVisible={2}\n  /\u003e\n);\n```\n\nFor a tokenizer typeahead input:\n\n```javascript\nvar Tokenizer = require('react-typeahead').Tokenizer;\nReact.render(\n  \u003cTokenizer\n    options={['John', 'Paul', 'George', 'Ringo']}\n    onTokenAdd={function(token) {\n      console.log('token added: ', token);\n    }}\n  /\u003e\n);\n```\n\n## Examples\n\n* [Basic Typeahead with Topcoat][1]\n* [Typeahead Tokenizer with Topcoat][2]\n* [Typeahead Tokenizer with simple styling][3]\n\n![](https://i.cloudup.com/CeLPJjWvFK.gif)\n\n[1]: http://wookiehangover.github.com/react-typeahead/examples/typeahead-topcoat.html\n[2]: http://wookiehangover.github.com/react-typeahead/examples/tokenizer-topcoat.html\n[3]: http://wookiehangover.github.com/react-typeahead/examples/TypeaheadTokenizer-simple.html\n[4]: http://blog.npmjs.org/post/85484771375/how-to-install-npm\n\n## API\n\n### Typeahead(props)\n\nType: React Component\n\nBasic typeahead input and results list.\n\n#### props.options\n\nType: `Array`\nDefault: []\n\nAn array supplied to the filtering function. Can be a list of strings or a list of arbitrary objects. In the latter case, `filterOption` and `displayOption` should be provided.\n\n#### props.defaultValue\n\nType: `String`\n\nA default value used when the component has no value. If it matches any options a option list will show.\n\n#### props.value\n\nType: `String`\n\nSpecify a value for the text input.\n\n#### props.maxVisible\n\nType: `Number`\n\nLimit the number of options rendered in the results list.\n\n#### props.resultsTruncatedMessage\n\nType: `String`\n\nIf `maxVisible` is set, display this custom message at the bottom of the list of results when the result are truncated.\n\n#### props.customClasses\n\nType: `Object`\nAllowed Keys: `input`, `results`, `listItem`, `listAnchor`, `hover`, `typeahead`, `resultsTruncated`\n\nAn object containing custom class names for child elements. Useful for\nintegrating with 3rd party UI kits.\n\n#### props.placeholder\n\nType: `String`\n\nPlaceholder text for the typeahead input.\n\n#### props.disabled\n\nType: `Boolean`\n\nSet to `true` to add disable attribute in the `\u003cinput\u003e` or `\u003ctextarea\u003e` element\n\n#### props.textarea\n\nType: `Boolean`\n\nSet to `true` to use a `\u003ctextarea\u003e` element rather than an `\u003cinput\u003e` element\n\n#### props.inputProps\n\nType: `Object`\n\nProps to pass directly to the `\u003cinput\u003e` element.\n\n#### props.onKeyDown\n\nType: `Function`\n\nEvent handler for the `keyDown` event on the typeahead input.\n\n#### props.onKeyPress\n\nType: `Function`\n\nEvent handler for the `keyPress` event on the typeahead input.\n\n#### props.onKeyUp\n\nType: `Function`\n\nEvent handler for the `keyUp` event on the typeahead input.\n\n#### props.onBlur\n\nType: `Function`\n\nEvent handler for the `blur` event on the typeahead input.\n\n#### props.onFocus\n\nType: `Function`\n\nEvent handler for the `focus` event on the typeahead input.\n\n#### props.onOptionSelected\n\nType: `Function`\n\nEvent handler triggered whenever a user picks an option.\n\n#### props.filterOption\n\nType: `String` or `Function`\n\nA function to filter the provided `options` based on the current input value. For each option, receives `(inputValue, option)`. If not supplied, defaults to [fuzzy string matching](https://github.com/mattyork/fuzzy).\n\nIf provided as a string, it will interpret it as a field name and fuzzy filter on that field of each option object.\n\n#### props.displayOption\n\nType: `String` or `Function`\n\nA function to map an option onto a string for display in the list. Receives `(option, index)` where index is relative to the results list, not all the options. Must return a string.\n\nIf provided as a string, it will interpret it as a field name and use that field from each option object.\n\n#### props.formInputOption\n\nType: `String` or `Function`\n\nA function to map an option onto a string to include in HTML forms (see `props.name`). Receives `(option)` as arguments. Must return a string.\n\nIf specified as a string, it will interpret it as a field name and use that field from each option object.\n\nIf not specified, it will fall back onto the semantics described in `props.displayOption`.\n\nThis option is ignored if you don't specify the `name` prop. It is required if you both specify the `name` prop and are using non-string options. It is optional otherwise.\n\n#### props.defaultClassNames\n\nType: `boolean`\nDefault: true\n\nIf false, the default classNames are removed from the typeahead.\n\n#### props.customListComponent\n\nType: `React Component`\n\nA React Component that renders the list of typeahead results. This replaces the default list of results.\n\nThis component receives the following props :\n\n##### Passed through\n\n- `props.displayOptions`\n- `props.customClasses`\n- `props.onOptionSelected`\n\n##### Created or modified\n- `props.options`\n  - This is the Typeahead's `props.options` filtered and limited to `Typeahead.props.maxVisible`.\n- `props.selectionIndex`\n  - The index of the highlighted option for rendering\n\n#### props.showOptionsWhenEmpty\n\nType: `boolean`\nDefault: false\n\nIf true, options will still be rendered when there is no value.\n\n#### props.allowCustomValues\n\nType: `boolean`\n\nIf true, custom tags can be added without a matching typeahead selection\n\n### Typeahead ([Exposed Component Functions][reactecf])\n\n#### typeahead.focus\n\nFocuses the typeahead input.\n\n---\n\n### Tokenizer(props)\n\nType: React Component\n\nTypeahead component that allows for multiple options to be selected.\n\n#### props.options\n\nType: `Array`\nDefault: []\n\nAn array supplied to the filter function.\n\n#### props.maxVisible\n\nType: `Number`\n\nLimit the number of options rendered in the results list.\n\n#### props.resultsTruncatedMessage\n\nType: `String`\n\nIf `maxVisible` is set, display this custom message at the bottom of the list of results when the result are truncated.\n\n#### props.name\n\nType: `String`\n\nThe name for HTML forms to be used for submitting the tokens' values array.\n\n#### props.customClasses\n\nType: `Object`\nAllowed Keys: `input`, `results`, `listItem`, `listAnchor`, `hover`, `typeahead`, `resultsTruncated`, `token`\n\nAn object containing custom class names for child elements. Useful for\nintegrating with 3rd party UI kits.\n\n#### props.placeholder\n\nType: `String`\n\nPlaceholder text for the typeahead input.\n\n#### props.disabled\n\nType: `Boolean`\n\nSet to `true` to add disable attribute in the `\u003cinput\u003e` or `\u003ctextarea\u003e` element\n\n#### props.inputProps\n\nType: `Object`\n\nProps to pass directly to the `\u003cinput\u003e` element.\n\n#### props.onKeyDown\n\nType: `Function`\n\nEvent handler for the `keyDown` event on the typeahead input.\n\n#### props.onKeyPress\n\nType: `Function`\n\nEvent handler for the `keyPress` event on the typeahead input.\n\n#### props.onKeyUp\n\nType: `Function`\n\nEvent handler for the `keyUp` event on the typeahead input.\n\n#### props.onBlur\n\nType: `Function`\n\nEvent handler for the `blur` event on the typeahead input.\n\n#### props.onFocus\n\nType: `Function`\n\nEvent handler for the `focus` event on the typeahead input.\n\n#### props.defaultSelected\n\nType: `Array`\n\nA set of values of tokens to be loaded on first render.\n\n#### props.onTokenRemove\n\nType: `Function`\nParams: `(removedToken)`\n\nEvent handler triggered whenever a token is removed.\n\n#### props.onTokenAdd\n\nType: `Function`\nParams: `(addedToken)`\n\nEvent handler triggered whenever a token is added.\n\n#### props.displayOption\n\nType: `String` or `Function`\n\nA function to map an option onto a string for display in the list. Receives `(option, index)` where index is relative to the results list, not all the options. Can either return a string or a React component.\n\nIf provided as a string, it will interpret it as a field name and use that field from each option object.\n\n#### props.filterOption\n\nType: `String` or `Function`\n\nA function to filter the provided `options` based on the current input value. For each option, receives `(inputValue, option)`. If not supplied, defaults to [fuzzy string matching](https://github.com/mattyork/fuzzy).\n\nIf provided as a string, it will interpret it as a field name and use that field from each option object.\n\n#### props.searchOptions\n\nType: `Function`\n\nA function to filter, map, and/or sort the provided `options` based on the current input value.\nReceives `(inputValue, options)`.\nIf not supplied, defaults to [fuzzy string matching](https://github.com/mattyork/fuzzy).\n\nNote: the function can be used to store other information besides the string in the internal state of the component.\nMake sure to use the `displayOption`, `inputDisplayOption`, and `formInputOption` props to extract/generate the correct format of data that each expects if you do this.\n\n#### props.inputDisplayOption\n\nType: `String` or `Function`\n\nA function that maps the internal state of the visible options into the value stored in the text value field of the visible input when an option is selected.\n\nReceives `(option)`.\n\nIf provided as a string, it will interpret it as a field name and use that field from each option object.\n\nIf no value is set, the input will be set using `displayOption` when an option is selected.\n\n#### props.formInputOption\n\nType: `String` or `Function`\n\nA function to map an option onto a string to include in HTML forms as a hidden field (see `props.name`). Receives `(option)` as arguments. Must return a string.\n\nIf specified as a string, it will interpret it as a field name and use that field from each option object.\n\nIf not specified, it will fall back onto the semantics described in `props.displayOption`.\n\n#### props.defaultClassNames\n\nType: `boolean`\nDefault: true\n\nIf false, the default classNames are removed from the tokenizer and the typeahead.\n\n#### props.showOptionsWhenEmpty\n\nType: `boolean`\nDefault: false\n\nIf true, options will still be rendered when there is no value.\n\n### Tokenizer ([Exposed Component Functions][reactecf])\n\n#### tokenizer.focus\n\nFocuses the tokenizer input.\n\n#### tokenizer.getSelectedTokens\n\nType: `Function`\n\nA function to return the currently selected tokens.\n\n## Developing\n\n### Setting Up\n\nYou will need `npm` to develop on react-typeahead.  [Installing npm][4].\n\nOnce that's done, to get started, run `npm install` in your checkout directory.\nThis will install all the local development dependences, such as `gulp` and `mocha`\n\n### Testing\n\nreact-typeahead uses mocha for unit tests and gulp for running them.  Large changes should\ninclude unittests.\n\nAfter updating or creating new tests, run `npm run-script build-test` to regenerate the\ntest package.\n\nOnce that's done, running the tests is easy with `gulp`:\n\n```\n\u003e gulp test\n[00:17:25] Using gulpfile ~/src/react-typeahead/gulpfile.js\n[00:17:25] Starting 'test'...\n\n\n  ․․․․․․․․․․․․․․․\n\n  15 passing (43ms)\n\n[00:17:25] Finished 'test' after 448 ms\n[00:17:25] Starting 'default'...\n[00:17:25] Finished 'default' after 6.23 μs\n```\n\n### Contributing\n\nBasically, fork the repository and send a pull request.  It can be difficult to review these, so\nhere are some general rules to follow for getting your PR accepted more quickly:\n\n- All new properties and exposed component function should be documented in the README.md\n- Break your changes into smaller, easy to understand commits.\n- Send separate PRs for each commit when possible.\n- Feel free to rebase, merge, and rewrite commits to make them more readible.\n- Add comments explaining anything that's not painfully obvious.\n- Add unittests for your change if possible.\n\n[reactecf]: https://facebook.github.io/react/tips/expose-component-functions.html\n","funding_links":[],"categories":["UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Form Components","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffmoo%2Freact-typeahead","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffmoo%2Freact-typeahead","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffmoo%2Freact-typeahead/lists"}