{"id":11651,"library":"react-autosuggest","title":"React Autosuggest","description":"React Autosuggest is a WAI-ARIA compliant React component designed to provide robust autosuggest and autocomplete functionality. It allows for highly customizable suggestion lists, including asynchronous data fetching, sectioned suggestions, and full control over the rendering of both suggestions and the input field itself. The current stable version is 10.1.0. While it has been widely adopted, the project is currently in a maintenance phase and is actively seeking new maintainers, which may affect its release cadence. Key differentiators include its strong emphasis on accessibility (WAI-ARIA compliance), extensive flexibility in styling (supporting CSS Modules, Radium, Aphrodite, JSS), and its comprehensive customization options, making it suitable for integration with state management libraries like Redux.","status":"maintenance","version":"10.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/moroshko/react-autosuggest","tags":["javascript","autosuggest","autocomplete","auto-suggest","auto-complete","auto suggest","auto complete","react autosuggest","react autocomplete"],"install":[{"cmd":"npm install react-autosuggest","lang":"bash","label":"npm"},{"cmd":"yarn add react-autosuggest","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-autosuggest","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React component rendering.","package":"react","optional":false}],"imports":[{"note":"Autosuggest is a default export from the package.","wrong":"import { Autosuggest } from 'react-autosuggest';","symbol":"Autosuggest","correct":"import Autosuggest from 'react-autosuggest';"},{"note":"Use this for CommonJS environments; typically, ESM imports are preferred in modern React projects.","symbol":"Autosuggest (CommonJS)","correct":"const Autosuggest = require('react-autosuggest');"}],"quickstart":{"code":"import 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// Teach Autosuggest how to calculate suggestions for any given input value.\nconst getSuggestions = value => {\n  const inputValue = value.trim().toLowerCase();\n  const inputLength = inputValue.length;\n\n  return inputLength === 0 ? [] : languages.filter(lang =>\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 => suggestion.name;\n\n// Use your imagination to render suggestions.\nconst renderSuggestion = suggestion => (\n  <div>\n    {suggestion.name}\n  </div>\n);\n\nclass MyAutosuggest extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      value: '',\n      suggestions: []\n    };\n  }\n\n  onChange = (event, { newValue }) => {\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 }) => {\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 = () => {\n    this.setState({\n      suggestions: []\n    });\n  };\n\n  render() {\n    const { value, suggestions } = this.state;\n\n    // Autosuggest will pass through all inputProps 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      <Autosuggest\n        suggestions={suggestions}\n        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}\n        onSuggestionsClearRequested={this.onSuggestionsClearRequested}\n        getSuggestionValue={getSuggestionValue}\n        renderSuggestion={renderSuggestion}\n        inputProps={inputProps}\n      />\n    );\n  }\n}\n\nexport default MyAutosuggest;","lang":"javascript","description":"Demonstrates the basic setup of `react-autosuggest` with static suggestions, including how to define `getSuggestions`, `getSuggestionValue`, `renderSuggestion`, and manage component state."},"warnings":[{"fix":"Ensure your project's React dependency is `react@^16.3.0` or newer. Upgrade React if necessary: `npm install react@^16.3.0 react-dom@^16.3.0` or `yarn add react@^16.3.0 react-dom@^16.3.0`.","message":"Version 10.0.0 introduced a breaking change by relying on `UNSAFE_componentWillReceiveProps`, which requires React version 16.3.0 or higher. Using `react-autosuggest` v10 with older React versions will result in runtime errors.","severity":"breaking","affected_versions":">=10.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade your React and ReactDOM peer dependencies to at least `^16.3.0`. For example: `npm install react@^16.3.0 react-dom@^16.3.0`.","cause":"This typically occurs when `react-autosuggest` v10+ is used with a React version older than 16.3.0, which removed or renamed certain lifecycle methods.","error":"TypeError: Cannot read properties of undefined (reading 'setState') or similar lifecycle method errors."},{"fix":"Initialize your component's state with `suggestions: []` and ensure that `onSuggestionsFetchRequested` always sets `suggestions` to an array, even an empty one, if no matches are found.","cause":"The `suggestions` prop must be an array, even if empty. If `onSuggestionsFetchRequested` is asynchronous, the initial state might not provide an array.","error":"Warning: Failed prop type: The prop `suggestions` is marked as required in `Autosuggest`, but its value is `undefined`."},{"fix":"Ensure you are importing the default CSS (`import 'react-autosuggest/dist/standalone/autosuggest.css';`) or providing a complete `theme` prop to `Autosuggest` that correctly styles the suggestions container (`suggestionsContainer`) and items (`suggestion`). Inspect with browser developer tools to check applied styles and element visibility.","cause":"This is often a CSS issue. The component expects specific class names to be themed, and if the default styling isn't applied or is overridden incorrectly, suggestions may not render visibly or be positioned off-screen.","error":"Suggestions are not visible or misaligned, despite `onSuggestionsFetchRequested` returning data."}],"ecosystem":"npm"}