{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-autosuggest"],"cli":null},"imports":["import Autosuggest from 'react-autosuggest';","const Autosuggest = require('react-autosuggest');"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}