{"id":15556461,"url":"https://github.com/gforge/react-typeahead-ts","last_synced_at":"2025-04-23T20:45:52.955Z","repository":{"id":70448477,"uuid":"129398774","full_name":"gforge/react-typeahead-ts","owner":"gforge","description":"A typescript rewrite of the fmoo/react-typehead npm package","archived":false,"fork":false,"pushed_at":"2020-11-07T08:47:46.000Z","size":9307,"stargazers_count":5,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T05:53:37.422Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gforge.github.io/react-typeahead-ts/","language":"TypeScript","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/gforge.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-13T12:23:47.000Z","updated_at":"2023-08-10T17:15:54.000Z","dependencies_parsed_at":"2023-04-05T00:24:36.103Z","dependency_job_id":null,"html_url":"https://github.com/gforge/react-typeahead-ts","commit_stats":{"total_commits":88,"total_committers":2,"mean_commits":44.0,"dds":0.1477272727272727,"last_synced_commit":"ce4f6fe9b2106f559c6cf34584eae23346858039"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gforge%2Freact-typeahead-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gforge%2Freact-typeahead-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gforge%2Freact-typeahead-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gforge%2Freact-typeahead-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gforge","download_url":"https://codeload.github.com/gforge/react-typeahead-ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250513380,"owners_count":21443200,"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-10-02T15:13:57.203Z","updated_at":"2025-04-23T20:45:52.938Z","avatar_url":"https://github.com/gforge.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/gforge/react-typeahead-ts.svg?branch=master)](https://travis-ci.org/gforge/react-typeahead-ts)\n[![npm version](https://badge.fury.io/js/%40gforge%2Freact-typeahead-ts.svg)](https://badge.fury.io/js/%40gforge%2Freact-typeahead-ts)\n\n# The @gforge/react-typeahead-ts\n\n\u003e A typeahead/autocomplete component for React\n\n@gforge/react-typeahead-ts is a [TypeScript](http://www.typescriptlang.org/)\n(a superset of 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. It can be used\nwith regular JavaScript usin standard syntax although TypeScript is\nrecommended as the library has dropped the deprecated `prop-types`.\nThe project is a fork from the [react-typeahead](https://github.com/fmoo/react-typeahead)\nas suggested by the name.\n\n## Usage\n\nFor a typeahead input:\n\n```javascript\nimport { Typeahead } from '@gforge/react-typeahead-ts';\nReact.render(\n  \u003cTypeahead options={['John', 'Paul', 'George', 'Ringo']} maxVisible={2} /\u003e\n);\n```\n\nFor a tokenizer typeahead input:\n\n```javascript\nimport { Tokenizer } from '@gforge/react-typeahead-ts';\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- [Package demo][1]\n\n[1]: http://gforge.github.com/react-typeahead-ts\n\n## API\n\nIt is strongly recommended to look at the typescipt files in order to understand the API and what input is expected. The library is fully typed in the API and has a minimal reliance on `any`.\n\n### Typeahead(props)\n\nType: React Component\n\nBasic typeahead input and results list.\n\n| Name                    | Type                   | Description                                                                                                                                                                                    |\n| ----------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| name                    | `String`               | If provided there will be a hidden input wiht a name with the selected value                                                                                                                   |\n| options                 | `Array`                | An 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| defaultValue            | `String`               | A default value used when the component has no value. If it matches any options a option list will show.                                                                                       |\n| value                   | `String`               | Specify a value for the text input.                                                                                                                                                            |\n| initialValue            | `String`               | The value when mounting                                                                                                                                                                        |\n| maxVisible              | `Number`               | Limit the number of options rendered in the results list.                                                                                                                                      |\n| resultsTruncatedMessage | `String`               | If `maxVisible` is set, display this custom message at the bottom of the list of results when the result are truncated.                                                                        |\n| customClasses           | `Object`               | An object containing custom class names for child elements (see [description below](#the-customclasses-argument))                                                                              |\n| placeholder             | `String`               | Placeholder text for the typeahead input.                                                                                                                                                      |\n| disabled                | `Boolean`              | Set to `true` to add disable attribute in the `\u003cinput\u003e` or `\u003ctextarea\u003e` element                                                                                                                |\n| textarea                | `Boolean`              | Set to `true` to use a `\u003ctextarea\u003e` element rather than an `\u003cinput\u003e` element                                                                                                                   |\n| inputProps              | `Object`               | Props to pass directly to the `\u003cinput\u003e` element.                                                                                                                                               |\n| onKeyDown               | `Function`             | Event handler for the `keyDown` event on the typeahead input.                                                                                                                                  |\n| onKeyPress              | `Function`             | Event handler for the `keyPress` event on the typeahead input.                                                                                                                                 |\n| onKeyUp                 | `Function`             | Event handler for the `keyUp` event on the typeahead input.                                                                                                                                    |\n| onBlur                  | `Function`             | Event handler for the `blur` event on the typeahead input.                                                                                                                                     |\n| onFocus                 | `Function`             | Event handler for the `focus` event on the typeahead input.                                                                                                                                    |\n| onChange                | `Function`             | Event handler for the `change` event on the typeahead input.                                                                                                                                   |\n| onOptionSelected        | `Function`             | Event handler triggered whenever a user picks an option.                                                                                                                                       |\n| displayOption           | `String` or `Function` | A function to map an option onto a string for display in the list (see [description below](#the-displayoption-argument)).                                                                      |\n| filterOption            | `String` or `Function` | A function to filter the provided `options` based on the current input value (see [description below](#the-filteroption-argument)).                                                            |\n| inputDisplayOption      | `String` or `Function` | A function that maps the internal state of the visible options into the value stored in the text value field of the visible input (see [description below](#the-inputdisplayoption-argument)). |\n| formInputOption         | `String` or `Function` | A function to map an option onto a string to include in HTML forms as a hidden field (see `name` and [description below](#the-forminputoption-argument))                                       |\n| searchOptions           | `Function`             | Search the provided `options` based on the current input value (see [description below](#the-searchoptions-argument), defaults to [fuzzy string matching](https://github.com/mattyork/fuzzy)). |\n| defaultClassNames       | `Boolean`              | If false, the default classNames are removed from the typeahead.                                                                                                                               |\n| customListComponent     | `React Component`      | A React Component that renders the list of typeahead results. This replaces the default list of results (see below [description below](#the-customlistcomponent-argument))                     |\n| showOptionsWhenEmpty    | `Boolean`              | If true, options will still be rendered when there is no value.                                                                                                                                |\n| allowCustomValues       | `Boolean`              | If true, custom tags can be added without a matching typeahead selection                                                                                                                       |\n| clearOnSelection        | `Boolean`              | Clear value after selecting. Primarily used with Tokenizer.                                                                                                                                    |\n| className               | `String`               | String with class name                                                                                                                                                                         |\n| innerRef                | `React reference`      | A `createRef` object                                                                                                                                                                           |\n| separateByComma         | `Boolean`              | Allows you to select an option using a comma.                                                                                                                                                  |\n\n\n### Tokenizer(props)\n\nType: React Component\n\nTypeahead component that allows for multiple options to be selected. The following properties are identical as for the **Typeahead**:\n\n- `name`\n- `options`\n- `initialValue`\n- `maxVisible`\n- `resultsTruncatedMessage`\n- `customClasses`\n- `placeholder`\n- `disabled`\n- `inputProps`\n- `onKeyDown`\n- `onKeyPress`\n- `onKeyUp`\n- `onBlur`\n- `onFocus`\n- `onChange`\n- `displayOption`\n- `filterOption`\n- `formInputOption`\n- `searchOptions`\n- `defaultClassNames`\n- `showOptionsWhenEmpty`\n- `className`\n- `innerRef`\n\nThe new additional arguments are:\n\n| Name                 | Type       | Description                                                     |\n| -------------------- | ---------- | --------------------------------------------------------------- |\n| defaultSelected      | `Array`    | A set of values of tokens to be loaded on first render.         |\n| onTokenRemove        | `Function` | Event handler triggered whenever a token is removed.            |\n| onTokenAdd           | `Function` | Event handler triggered whenever a token is added.              |\n| showOptionsWhenEmpty | `Boolean`  | If true, options will still be rendered when there is no value. |\n\n### Specific props details\n\n#### The searchOptions argument\n\nType: `(value: string, options: Option[]) =\u003e Option[]`\n\nA function to filter and/or sort the provided `options` based on the current input value. Compared to `filterOption` it allows you to sort the results any way you want.\n\nIf not supplied, defaults to the `filterOption`.\n\n_Note:_ 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#### The filterOption argument\n\nType: `String` or `(value: string, option: Option) =\u003e boolean`\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#### The displayOption argument\n\nType: `String` or `(option: Option) =\u003e string | number`\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#### The inputDisplayOption argument\n\nType: `String` or `(option: Option, index?: number) =\u003e string | number`\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#### The formInputOption argument\n\nType: `String` or `(option: Option) =\u003e string | number`\n\nA function to map an option onto a string to include in HTML forms as a hidden field (see `name`).\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 `displayOption`.\n\n#### The customClasses argument\n\nType: `Object`\n\nAllowed Keys: `input`, `results`, `listItem`, `listAnchor`, `hover`, `resultsTruncated`. For the **Tokenizer** you can also provide `token`, `typeahead` and `tokenList`.\n\nAn object containing custom class names for child elements. Useful for\nintegrating with 3rd party UI kits.\n\n#### The customListComponent argument\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- `displayOptions`\n- `customClasses`\n- `onOptionSelected`\n\n##### Created or modified\n\n- `options`\n  - This is the Typeahead's `options` filtered and limited to `Typeahead.maxVisible`.\n- `selectionIndex`\n  - The index of the highlighted option for rendering\n\n---\n\n## Developing\n\n### Setting Up\n\nYou will need `npm` to develop on react-typeahead-ts. [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-ts uses jest and enzyme for unit tests. Large changes should\ninclude unittests. After updating or creating new tests, run `npm run test` to regenerate the\ntest package.\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgforge%2Freact-typeahead-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgforge%2Freact-typeahead-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgforge%2Freact-typeahead-ts/lists"}