{"id":13394578,"url":"https://github.com/moroshko/react-autosuggest","last_synced_at":"2025-05-13T15:02:54.434Z","repository":{"id":28298302,"uuid":"31810895","full_name":"moroshko/react-autosuggest","owner":"moroshko","description":"WAI-ARIA compliant React autosuggest component","archived":false,"fork":false,"pushed_at":"2024-11-19T12:16:31.000Z","size":8114,"stargazers_count":5967,"open_issues_count":261,"forks_count":584,"subscribers_count":57,"default_branch":"master","last_synced_at":"2025-05-05T22:15:54.912Z","etag":null,"topics":["accessible","autocomplete","autosuggest","react","typeahead"],"latest_commit_sha":null,"homepage":"http://react-autosuggest.js.org","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/moroshko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2015-03-07T12:09:12.000Z","updated_at":"2025-05-02T14:32:52.000Z","dependencies_parsed_at":"2024-02-04T15:12:21.686Z","dependency_job_id":"8b9ad7c2-8033-4eb5-9826-678096f5494f","html_url":"https://github.com/moroshko/react-autosuggest","commit_stats":{"total_commits":679,"total_committers":54,"mean_commits":"12.574074074074074","dds":0.1782032400589102,"last_synced_commit":"a1ebd7d29aa60a355898664c45916d581abd1b4e"},"previous_names":[],"tags_count":105,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Freact-autosuggest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Freact-autosuggest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Freact-autosuggest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Freact-autosuggest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moroshko","download_url":"https://codeload.github.com/moroshko/react-autosuggest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253336910,"owners_count":21892797,"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":["accessible","autocomplete","autosuggest","react","typeahead"],"created_at":"2024-07-30T17:01:24.390Z","updated_at":"2025-05-13T15:02:54.413Z","avatar_url":"https://github.com/moroshko.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components","Uncategorized","Components","react","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","React [🔝](#readme)","React","UI components"],"sub_categories":["Form Components","Uncategorized","Autocomplete"],"readme":"[![Build Status](https://img.shields.io/codeship/41810250-aa07-0132-fbf4-4e62e8945e03/master.svg?style=flat-square)](https://codeship.com/projects/67868)\n[![Contributors](https://img.shields.io/github/contributors/moroshko/react-autosuggest.svg?style=flat-square)](https://github.com/moroshko/react-autosuggest/graphs/contributors)\n[![Coverage Status](https://img.shields.io/codecov/c/github/moroshko/react-autosuggest/master.svg?style=flat-square)](https://codecov.io/gh/moroshko/react-autosuggest)\n\n[![npm Downloads](https://img.shields.io/npm/dm/react-autosuggest.svg?style=flat-square)](https://npmjs.org/package/react-autosuggest)\n[![npm Version](https://img.shields.io/npm/v/react-autosuggest.svg?style=flat-square)](https://npmjs.org/package/react-autosuggest)\n![gzip size](http://img.badgesize.io/https://unpkg.com/react-autosuggest/dist/standalone/autosuggest.min.js?compression=gzip\u0026style=flat-square)\n\n# React Autosuggest\n\n## Project Status\n\nLooking for maintainers!\n\nUnfortunately, I don't have the time to maintain this project anymore. If you are interested to help, please reach out to me on Twitter [@moroshko](https://twitter.com/moroshko).\n\n## React-Autosuggest AI Bot\n\n[React-Autosuggest](https://codeparrot.ai/oracle?owner=moroshko\u0026repo=react-autosuggest) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.\n\n## Demo\n\nCheck out the [Homepage](http://react-autosuggest.js.org) and the [Codepen examples](http://codepen.io/collection/DkkYaQ).\n\n## Features\n\n- [WAI-ARIA compliant](https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete), with support for ARIA attributes and keyboard interactions\n- Mobile friendly\n- Plugs in nicely to Flux and [Redux](http://redux.js.org) applications\n- Full control over [suggestions rendering](#render-suggestion-prop)\n- Suggestions can be presented as [plain list](http://codepen.io/moroshko/pen/LGNJMy) or [multiple sections](http://codepen.io/moroshko/pen/qbRNjV)\n- Suggestions can be retrieved [asynchronously](http://codepen.io/moroshko/pen/EPZpev)\n- [Highlight the first suggestion](#highlight-first-suggestion-prop) in the list if you wish\n- Supports styling using [CSS Modules](https://github.com/css-modules/css-modules), [Radium](https://github.com/FormidableLabs/radium), [Aphrodite](https://github.com/Khan/aphrodite), [JSS](https://github.com/cssinjs/jss), [and more](#theme-prop)\n- You decide [when to show suggestions](#should-render-suggestions-prop) (e.g. when user types 2 or more characters)\n- [Always render suggestions](#always-render-suggestions-prop) (useful for mobile and modals)\n- [Pass through arbitrary props to the input](#input-props-prop) (e.g. placeholder, type, [onChange](#input-props-on-change), [onBlur](#input-props-on-blur), or any other), or [take full control on the rendering of the input](#render-input-component-prop) (useful for integration with other libraries)\n- Thoroughly tested\n\n## Installation\n\n```shell\nyarn add react-autosuggest\n```\n\nor\n\n```shell\nnpm install react-autosuggest --save\n```\n\nYou can also use the standalone UMD build:\n\n```html\n\u003cscript src=\"https://unpkg.com/react-autosuggest/dist/standalone/autosuggest.js\"\u003e\u003c/script\u003e\n```\n\n## Basic Usage\n\n```js\nimport React from 'react';\nimport Autosuggest from 'react-autosuggest';\n\n// Imagine you have a list of languages that you'd like to autosuggest.\nconst languages = [\n  {\n    name: 'C',\n    year: 1972\n  },\n  {\n    name: 'Elm',\n    year: 2012\n  },\n  ...\n];\n\n// Teach Autosuggest how to calculate suggestions for any given input value.\nconst getSuggestions = value =\u003e {\n  const inputValue = value.trim().toLowerCase();\n  const inputLength = inputValue.length;\n\n  return inputLength === 0 ? [] : languages.filter(lang =\u003e\n    lang.name.toLowerCase().slice(0, inputLength) === inputValue\n  );\n};\n\n// When suggestion is clicked, Autosuggest needs to populate the input\n// based on the clicked suggestion. Teach Autosuggest how to calculate the\n// input value for every given suggestion.\nconst getSuggestionValue = suggestion =\u003e suggestion.name;\n\n// Use your imagination to render suggestions.\nconst renderSuggestion = suggestion =\u003e (\n  \u003cdiv\u003e\n    {suggestion.name}\n  \u003c/div\u003e\n);\n\nclass Example extends React.Component {\n  constructor() {\n    super();\n\n    // Autosuggest is a controlled component.\n    // This means that you need to provide an input value\n    // and an onChange handler that updates this value (see below).\n    // Suggestions also need to be provided to the Autosuggest,\n    // and they are initially empty because the Autosuggest is closed.\n    this.state = {\n      value: '',\n      suggestions: []\n    };\n  }\n\n  onChange = (event, { newValue }) =\u003e {\n    this.setState({\n      value: newValue\n    });\n  };\n\n  // Autosuggest will call this function every time you need to update suggestions.\n  // You already implemented this logic above, so just use it.\n  onSuggestionsFetchRequested = ({ value }) =\u003e {\n    this.setState({\n      suggestions: getSuggestions(value)\n    });\n  };\n\n  // Autosuggest will call this function every time you need to clear suggestions.\n  onSuggestionsClearRequested = () =\u003e {\n    this.setState({\n      suggestions: []\n    });\n  };\n\n  render() {\n    const { value, suggestions } = this.state;\n\n    // Autosuggest will pass through all these props to the input.\n    const inputProps = {\n      placeholder: 'Type a programming language',\n      value,\n      onChange: this.onChange\n    };\n\n    // Finally, render it!\n    return (\n      \u003cAutosuggest\n        suggestions={suggestions}\n        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}\n        onSuggestionsClearRequested={this.onSuggestionsClearRequested}\n        getSuggestionValue={getSuggestionValue}\n        renderSuggestion={renderSuggestion}\n        inputProps={inputProps}\n      /\u003e\n    );\n  }\n}\n```\n\n## Props\n\n| Prop                                                                   | Type     |                     Required                     | Description                                                                                                                                                                                           |\n| :--------------------------------------------------------------------- | :------- | :----------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [`suggestions`](#suggestions-prop)                                     | Array    |                        ✓                         | These are the suggestions that will be displayed. Items can take an arbitrary shape.                                                                                                                  |\n| [`onSuggestionsFetchRequested`](#on-suggestions-fetch-requested-prop)  | Function |                        ✓                         | Will be called every time you need to recalculate `suggestions`.                                                                                                                                      |\n| [`onSuggestionsClearRequested`](#on-suggestions-clear-requested-prop)  | Function | ✓[\\*](#on-suggestions-clear-requested-prop-note) | Will be called every time you need to set `suggestions` to `[]`.                                                                                                                                      |\n| [`getSuggestionValue`](#get-suggestion-value-prop)                     | Function |                        ✓                         | Implement it to teach Autosuggest what should be the input value when suggestion is clicked.                                                                                                          |\n| [`renderSuggestion`](#render-suggestion-prop)                          | Function |                        ✓                         | Use your imagination to define how suggestions are rendered.                                                                                                                                          |\n| [`inputProps`](#input-props-prop)                                      | Object   |                        ✓                         | Pass through arbitrary props to the input. It must contain at least `value` and `onChange`.                                                                                                           |\n| [`containerProps`](#container-props-prop) | Object | | Pass through arbitrary props to the container. Useful if you need to override the default props set by Autowhatever, for example, for accessibility. |\n| [`onSuggestionSelected`](#on-suggestion-selected-prop)                 | Function |                                                  | Will be called every time suggestion is selected via mouse or keyboard.                                                                                                                               |\n| [`onSuggestionHighlighted`](#on-suggestion-highlighted-prop)           | Function |                                                  | Will be called every time the highlighted suggestion changes.                                                                                                                                         |\n| [`shouldRenderSuggestions`](#should-render-suggestions-prop)           | Function |                                                  | When the input is focused, Autosuggest will consult this function when to render suggestions. Use it, for example, if you want to display suggestions when input value is at least 2 characters long. |\n| [`alwaysRenderSuggestions`](#always-render-suggestions-prop)           | Boolean  |                                                  | Set it to `true` if you'd like to render suggestions even when the input is not focused.                                                                                                              |\n| [`highlightFirstSuggestion`](#highlight-first-suggestion-prop)         | Boolean  |                                                  | Set it to `true` if you'd like Autosuggest to automatically highlight the first suggestion.                                                                                                           |\n| [`focusInputOnSuggestionClick`](#focus-input-on-suggestion-click-prop) | Boolean  |                                                  | Set it to `false` if you don't want Autosuggest to keep the input focused when suggestions are clicked/tapped.                                                                                        |\n| [`multiSection`](#multi-section-prop)                                  | Boolean  |                                                  | Set it to `true` if you'd like to display suggestions in multiple sections (with optional titles).                                                                                                    |\n| [`renderSectionTitle`](#render-section-title-prop)                     | Function |         ✓\u003cbr\u003ewhen `multiSection={true}`          | Use your imagination to define how section titles are rendered.                                                                                                                                       |\n| [`getSectionSuggestions`](#get-section-suggestions-prop)               | Function |         ✓\u003cbr\u003ewhen `multiSection={true}`          | Implement it to teach Autosuggest where to find the suggestions for every section.                                                                                                                    |\n| [`renderInputComponent`](#render-input-component-prop)                 | Function |                                                  | Use it only if you need to customize the rendering of the input.                                                                                                                                      |\n| [`renderSuggestionsContainer`](#render-suggestions-container-prop)     | Function |                                                  | Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves.                                                                                  |\n| [`theme`](#theme-prop)                                                 | Object   |                                                  | Use your imagination to style the Autosuggest.                                                                                                                                                        |\n| [`id`](#id-prop)                                                       | String   |                                                  | Use it only if you have multiple Autosuggest components on a page.                                                                                                                                    |\n\n\u003ca name=\"suggestions-prop\"\u003e\u003c/a\u003e\n\n#### suggestions (required)\n\nArray of suggestions to display. The only requirement is that `suggestions` is an array. Items in this array can take an arbitrary shape.\n\nFor a plain list of suggestions, every item in `suggestions` represents a single suggestion. It's up to you what shape every suggestion takes. For example:\n\n```js\nconst suggestions = [\n  {\n    text: \"Apple\"\n  },\n  {\n    text: \"Banana\"\n  },\n  {\n    text: \"Cherry\"\n  },\n  {\n    text: \"Grapefruit\"\n  },\n  {\n    text: \"Lemon\"\n  }\n];\n```\n\nFor [multiple sections](#multi-section-prop), every item in `suggestions` represents a single section. Again, it's up to you what shape every section takes. For example:\n\n```js\nconst suggestions = [\n  {\n    title: \"A\",\n    suggestions: [\n      {\n        id: \"100\",\n        text: \"Apple\"\n      },\n      {\n        id: \"101\",\n        text: \"Apricot\"\n      }\n    ]\n  },\n  {\n    title: \"B\",\n    suggestions: [\n      {\n        id: \"102\",\n        text: \"Banana\"\n      }\n    ]\n  },\n  {\n    title: \"C\",\n    suggestions: [\n      {\n        id: \"103\",\n        text: \"Cherry\"\n      }\n    ]\n  }\n];\n```\n\n\u003ca name=\"on-suggestions-fetch-requested-prop\"\u003e\u003c/a\u003e\n\n#### onSuggestionsFetchRequested (required)\n\nThis function will be called every time you might need to update [`suggestions`](#suggestions-prop). It has the following signature:\n\n```js\nfunction onSuggestionsFetchRequested({ value, reason })\n```\n\nwhere:\n\n- `value` - the current value of the input\n- `reason` - string describing why `onSuggestionsFetchRequested` was called. The possible values are:\n  - `'input-changed'` - user typed something\n  - `'input-focused'` - input was focused\n  - `'escape-pressed'` - user pressed \u003ckbd\u003eEscape\u003c/kbd\u003e to clear the input (and suggestions are shown for empty input)\n  - `'suggestions-revealed'` - user pressed \u003ckbd\u003eUp\u003c/kbd\u003e or \u003ckbd\u003eDown\u003c/kbd\u003e to reveal suggestions\n  - `'suggestion-selected'` - user selected a suggestion when `alwaysRenderSuggestions={true}`\n\n\u003ca name=\"#on-suggestions-clear-requested-prop\"\u003e\u003c/a\u003e\n\n#### onSuggestionsClearRequested (required unless `alwaysRenderSuggestions={true}`)\n\nThis function will be called every time you need to clear [`suggestions`](#suggestions-prop).\n\nAll you have to do in this function is to set `suggestions` to `[]`.\n\n\u003ca name=\"on-suggestions-clear-requested-prop-note\"\u003e\u003c/a\u003e\n**Note:** When `alwaysRenderSuggestions={true}`, you don't have to implement this function.\n\n\u003ca name=\"get-suggestion-value-prop\"\u003e\u003c/a\u003e\n\n#### getSuggestionValue (required)\n\nWhen user navigates the suggestions using the \u003ckbd\u003eUp\u003c/kbd\u003e and \u003ckbd\u003eDown\u003c/kbd\u003e keys, [the input value should be set according to the highlighted suggestion](https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete). You design how suggestion is modelled. Therefore, it's your responsibility to tell Autosuggest how to map suggestions to input values.\n\nThis function gets the suggestion in question, and it should return a string. For example:\n\n```js\nfunction getSuggestionValue(suggestion) {\n  return suggestion.text;\n}\n```\n\n\u003ca name=\"render-suggestion-prop\"\u003e\u003c/a\u003e\n\n#### renderSuggestion (required)\n\nUse your imagination to define how suggestions are rendered.\n\nThe signature is:\n\n```js\nfunction renderSuggestion(suggestion, { query, isHighlighted })\n```\n\nwhere:\n\n- `suggestion` - The suggestion to render\n- `query` - Used to highlight the matching string. As user types in the input, `query` will be equal to the trimmed value of the input. Then, if user interacts using the \u003ckbd\u003eUp\u003c/kbd\u003e or \u003ckbd\u003eDown\u003c/kbd\u003e keys, [the input will get the value of the highlighted suggestion](https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete), but `query` will remain to be equal to the trimmed value of the input prior to the \u003ckbd\u003eUp\u003c/kbd\u003e and \u003ckbd\u003eDown\u003c/kbd\u003e interactions.\n- `isHighlighted` - Whether or not the suggestion is highlighted.\n\nIt should return a string or a `ReactElement`. For example:\n\n```js\nfunction renderSuggestion(suggestion) {\n  return \u003cspan\u003e{suggestion.text}\u003c/span\u003e;\n}\n```\n\n**Important:** `renderSuggestion` must be a pure function (we optimize rendering performance based on this assumption).\n\n\u003ca name=\"input-props-prop\"\u003e\u003c/a\u003e\n\n#### inputProps (required)\n\nAutosuggest is a [controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components). Therefore, you MUST pass at least a `value` and an `onChange` callback to the input. You can pass any other props as well. For example:\n\n```js\nconst inputProps = {\n  value, // usually comes from the application state\n  onChange, // called every time the input value changes\n  onBlur, // called when the input loses focus, e.g. when user presses Tab\n  type: \"search\",\n  placeholder: \"Enter city or postcode\"\n};\n```\n\n\u003ca name=\"input-props-on-change\"\u003e\u003c/a\u003e\n\n##### inputProps.onChange (required)\n\nThe signature is:\n\n```js\nfunction onChange(event, { newValue, method })\n```\n\nwhere:\n\n- `newValue` - the new value of the input\n- `method` - string describing how the change has occurred. The possible values are:\n  - `'down'` - user pressed \u003ckbd\u003eDown\u003c/kbd\u003e\n  - `'up'` - user pressed \u003ckbd\u003eUp\u003c/kbd\u003e\n  - `'escape'` - user pressed \u003ckbd\u003eEscape\u003c/kbd\u003e\n  - `'enter'` - user pressed \u003ckbd\u003eEnter\u003c/kbd\u003e\n  - `'click'` - user clicked (or tapped) on suggestion\n  - `'type'` - none of the methods above (usually means that user typed something, but can also be that they pressed Backspace, pasted something into the input, etc.)\n\n\u003ca name=\"input-props-on-blur\"\u003e\u003c/a\u003e\n\n##### inputProps.onBlur (optional)\n\nThe signature is:\n\n```js\nfunction onBlur(event, { highlightedSuggestion })\n```\n\nwhere:\n\n- `highlightedSuggestion` - the suggestion that was highlighted just before the input lost focus, or `null` if there was no highlighted suggestion.\n\n\u003ca name=\"container-props-prop\"\u003e\u003c/a\u003e\n\n#### containerProps\n\nProvides arbitrary properties to the outer `div` container of Autosuggest. Allows the override of accessibility properties.\n\n```js\nconst containerProps = {\n  dataId: 'my-data-id'\n  // ... any other properties\n};\n```\n\n\u003ca name=\"on-suggestion-selected-prop\"\u003e\u003c/a\u003e\n\n#### onSuggestionSelected (optional)\n\nThis function is called when suggestion is selected. It has the following signature:\n\n```js\nfunction onSuggestionSelected(event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method })\n```\n\nwhere:\n\n- `suggestion` - the selected suggestion\n- `suggestionValue` - the value of the selected suggestion (equivalent to `getSuggestionValue(suggestion)`)\n- `suggestionIndex` - the index of the selected suggestion in the `suggestions` array\n- `sectionIndex` - when rendering [multiple sections](#multiSectionProp), this will be the section index (in [`suggestions`](#suggestions-prop)) of the selected suggestion. Otherwise, it will be `null`.\n- `method` - string describing how user selected the suggestion. The possible values are:\n  - `'click'` - user clicked (or tapped) on the suggestion\n  - `'enter'` - user selected the suggestion using \u003ckbd\u003eEnter\u003c/kbd\u003e\n\n\u003ca name=\"on-suggestion-highlighted-prop\"\u003e\u003c/a\u003e\n\n#### onSuggestionHighlighted (optional)\n\nThis function is called when the highlighted suggestion changes. It has the following signature:\n\n```js\nfunction onSuggestionHighlighted({ suggestion })\n```\n\nwhere:\n\n- `suggestion` - the highlighted suggestion, or `null` if there is no highlighted suggestion.\n\n\u003ca name=\"should-render-suggestions-prop\"\u003e\u003c/a\u003e\n\n#### shouldRenderSuggestions (optional)\n\nBy default, suggestions are rendered when the input isn't blank. Feel free to override this behaviour.\n\nThis function gets the current value of the input and the reason why the suggestions might be rendered, and it should return a boolean.\n\nFor example, to display suggestions only when input value is at least 3 characters long, do:\n\n```js\nfunction shouldRenderSuggestions(value, reason) {\n  return value.trim().length \u003e 2;\n}\n```\n\nYou can use the second `reason` argument to finely control exactly when the suggestions are rendered. The possible values are closely related to those for `onSuggestionsFetchRequested`, plus a few extra cases:\n\n- `'input-changed'` - user typed something\n- `'input-focused'` - input was focused\n- `'input-blurred'` - input was un-focused\n- `'escape-pressed'` - user pressed \u003ckbd\u003eEscape\u003c/kbd\u003e to clear the input (and suggestions are shown for empty input)\n- `'suggestions-revealed'` - user pressed \u003ckbd\u003eUp\u003c/kbd\u003e or \u003ckbd\u003eDown\u003c/kbd\u003e to reveal suggestions\n- `'suggestions-updated'` - the suggestions were updated\n- `'render'` - the component is re-rendering\n\nWhen `shouldRenderSuggestions` returns `true`, **suggestions will be rendered only when the input is focused**.\n\nIf you would like to render suggestions regardless of whether the input is focused or not, set `alwaysRenderSuggestions={true}` (`shouldRenderSuggestions` is ignored in this case).\n\n\u003ca name=\"always-render-suggestions-prop\"\u003e\u003c/a\u003e\n\n#### alwaysRenderSuggestions (optional)\n\nSet `alwaysRenderSuggestions={true}` if you'd like to always render the suggestions.\n\n**Important:** Make sure that the initial value of `suggestions` corresponds to the initial value of `inputProps.value`. For example, if you'd like to show all the suggestions when the input is empty, your initial state should be something like:\n\n```js\nthis.state = {\n  value: \"\",\n  suggestions: allSuggestions\n};\n```\n\n\u003ca name=\"highlight-first-suggestion-prop\"\u003e\u003c/a\u003e\n\n#### highlightFirstSuggestion (optional)\n\nWhen `highlightFirstSuggestion={true}`, Autosuggest will automatically highlight the first suggestion. Defaults to `false`.\n\n\u003ca name=\"focus-input-on-suggestion-click-prop\"\u003e\u003c/a\u003e\n\n#### focusInputOnSuggestionClick (optional)\n\nBy default, `focusInputOnSuggestionClick={true}`, which means that, every time suggestion is clicked (or tapped), the input keeps the focus.\n\nOn mobile devices, when the input is focused, the native keyboard appears. You'll probably want to lose the focus when suggestion is tapped in order to hide the keyboard.\n\nYou can do something like this:\n\n```xml\n\u003cAutosuggest focusInputOnSuggestionClick={!isMobile} ... /\u003e\n```\n\nwhere `isMobile` is a boolean describing whether Autosuggest operates on a mobile device or not. You can use [kaimallea/isMobile](https://github.com/kaimallea/isMobile), for example, to determine that.\n\n\u003ca name=\"multi-section-prop\"\u003e\u003c/a\u003e\n\n#### multiSection (optional)\n\nBy default, Autosuggest renders a plain list of suggestions.\n\nIf you'd like to have multiple sections (with optional titles), set `multiSection={true}`.\n\n\u003ca name=\"render-section-title-prop\"\u003e\u003c/a\u003e\n\n#### renderSectionTitle (required when `multiSection={true}`)\n\nWhen rendering [multiple sections](#multi-section-prop), you need to tell Autosuggest how to render a section title.\n\nThis function gets the section to render (an item in the [suggestions](#suggestions-prop) array), and it should return a string or a `ReactElement`. For example:\n\n```js\nfunction renderSectionTitle(section) {\n  return \u003cstrong\u003e{section.title}\u003c/strong\u003e;\n}\n```\n\nIf `renderSectionTitle` returns `null` or `undefined`, section title is not rendered.\n\n\u003ca name=\"get-section-suggestions-prop\"\u003e\u003c/a\u003e\n\n#### getSectionSuggestions (required when `multiSection={true}`)\n\nWhen rendering [multiple sections](#multi-section-prop), you need to tell Autosuggest where to find the suggestions for a given section.\n\nThis function gets the section to render (an item in the [suggestions](#suggestions-prop) array), and it should return an array of suggestions to render in the given section. For example:\n\n```js\nfunction getSectionSuggestions(section) {\n  return section.suggestions;\n}\n```\n\n**Note:** Sections with no suggestions are not rendered.\n\n\u003ca name=\"render-input-component-prop\"\u003e\u003c/a\u003e\n\n#### renderInputComponent (optional)\n\nYou shouldn't specify `renderInputComponent` unless you want to customize the rendering of the input.\n\nTo keep Autosuggest [accessible](https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete), `renderInputComponent` MUST:\n\n- render an input\n- pass through all the provided `inputProps` to the input\n\nExample:\n\n```js\nconst renderInputComponent = inputProps =\u003e (\n  \u003cdiv\u003e\n    \u003cinput {...inputProps} /\u003e\n    \u003cdiv\u003ecustom stuff\u003c/div\u003e\n  \u003c/div\u003e\n);\n```\n\n**Note:** When using `renderInputComponent`, you still need to specify the usual [`inputProps`](#input-props-prop). Autosuggest will merge the `inputProps` that you provide with other props that are needed for accessibility (e.g. `'aria-activedescendant'`), and will pass the **merged `inputProps`** to `renderInputComponent`.\n\n\u003ca name=\"render-suggestions-container-prop\"\u003e\u003c/a\u003e\n\n#### renderSuggestionsContainer (optional)\n\nYou shouldn't specify `renderSuggestionsContainer` unless you want to customize the content or behaviour of the suggestions container beyond rendering the suggestions themselves. For example, you might want to add a custom text before/after the suggestions list, or to [customize the scrolling behaviour of the suggestions container](https://github.com/moroshko/react-autosuggest/blob/master/FAQ.md#limitSuggestionsContainerScrolling).\n\nThe signature is:\n\n```js\nfunction renderSuggestionsContainer({ containerProps, children, query })\n```\n\nwhere:\n\n- `containerProps` - props that you MUST pass to the topmost element that is returned from `renderSuggestionsContainer`.\n- `children` - the suggestions themselves. It's up to you where to render them.\n- `query` - Same as `query` in [`renderSuggestion`](#render-suggestion-prop).\n\nFor example:\n\n```js\nfunction renderSuggestionsContainer({ containerProps, children, query }) {\n  return (\n    \u003cdiv {...containerProps}\u003e\n      {children}\n      \u003cdiv\u003e\n        Press Enter to search \u003cstrong\u003e{query}\u003c/strong\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nWhen `renderSuggestionsContainer` returns a composite component (e.g. `\u003cIsolatedScroll ... /\u003e` as opposed to a DOM node like `\u003cdiv ... /\u003e`), you MUST call `containerProps.ref` with the topmost element that the composite component renders.\n\nFor example:\n\n```js\nimport IsolatedScroll from \"react-isolated-scroll\";\n\nfunction renderSuggestionsContainer({ containerProps, children }) {\n  const { ref, ...restContainerProps } = containerProps;\n  const callRef = isolatedScroll =\u003e {\n    if (isolatedScroll !== null) {\n      ref(isolatedScroll.component);\n    }\n  };\n\n  return (\n    \u003cIsolatedScroll ref={callRef} {...restContainerProps}\u003e\n      {children}\n    \u003c/IsolatedScroll\u003e\n  );\n}\n```\n\n\u003ca name=\"theme-prop\"\u003e\u003c/a\u003e\n\n#### theme (optional)\n\nAutosuggest comes with no styles.\n\nIt uses [react-themeable](https://github.com/markdalgleish/react-themeable) that allows you to style your Autosuggest component using [CSS Modules](https://github.com/css-modules/css-modules), [Radium](https://github.com/FormidableLabs/radium), [Aphrodite](https://github.com/Khan/aphrodite), [JSS](https://github.com/cssinjs/jss), [Inline styles](https://facebook.github.io/react/docs/dom-elements.html#style), and global CSS.\n\nFor example, to style the Autosuggest using CSS Modules, do:\n\n```css\n/* theme.css */\n\n.container { ... }\n.input { ... }\n.suggestionsContainer { ... }\n.suggestion { ... }\n.suggestionHighlighted { ... }\n...\n```\n\n```js\nimport theme from \"theme.css\";\n```\n\n```xml\n\u003cAutosuggest theme={theme} ... /\u003e\n```\n\nWhen not specified, `theme` defaults to:\n\n```js\n{\n  container:                'react-autosuggest__container',\n  containerOpen:            'react-autosuggest__container--open',\n  input:                    'react-autosuggest__input',\n  inputOpen:                'react-autosuggest__input--open',\n  inputFocused:             'react-autosuggest__input--focused',\n  suggestionsContainer:     'react-autosuggest__suggestions-container',\n  suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open',\n  suggestionsList:          'react-autosuggest__suggestions-list',\n  suggestion:               'react-autosuggest__suggestion',\n  suggestionFirst:          'react-autosuggest__suggestion--first',\n  suggestionHighlighted:    'react-autosuggest__suggestion--highlighted',\n  sectionContainer:         'react-autosuggest__section-container',\n  sectionContainerFirst:    'react-autosuggest__section-container--first',\n  sectionTitle:             'react-autosuggest__section-title'\n}\n```\n\nThe following picture illustrates how `theme` keys correspond to Autosuggest DOM structure:\n\n![DOM structure](dom-structure.png)\n\n\u003ca name=\"id-prop\"\u003e\u003c/a\u003e\n\n#### id (required when multiple Autosuggest components are rendered on a page)\n\nThe only reason `id` exists, is to set ARIA attributes (they require a unique id).\n\nWhen rendering a single Autosuggest, don't set the `id` (it will be set to `'1'`, by default).\n\nWhen rendering multiple Autosuggest components on a page, make sure to give them unique `id`s. For example:\n\n```xml\n\u003cAutosuggest id=\"source\" ... /\u003e\n\u003cAutosuggest id=\"destination\" ... /\u003e\n```\n\n## Development\n\n```shell\nnpm install\nnpm start\n```\n\nNow, open `http://localhost:3000/demo/dist/index.html` and start hacking!\n\n## License\n\n[MIT](http://moroshko.mit-license.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoroshko%2Freact-autosuggest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoroshko%2Freact-autosuggest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoroshko%2Freact-autosuggest/lists"}