{"library":"react-bootstrap-typeahead","title":"React Bootstrap Typeahead","description":"react-bootstrap-typeahead is a React-based autocomplete component that integrates seamlessly with Bootstrap for styling, providing a familiar UI/UX. The current stable version is 6.4.1, with a major version 7.0.0-rc.x series in active development, indicating a consistent release cadence with significant updates. It offers both single and multi-selection capabilities, and is built with WAI-ARIA authoring practices compliance for accessibility. Key differentiators include its tight integration with Bootstrap 4/5, support for asynchronous data loading, customizable rendering, and a move towards composable primitives in the upcoming v7 to offer more flexibility compared to a monolithic component, making it suitable for complex auto-suggestion needs in Bootstrap-themed React applications. It dropped support for Bootstrap 4 in v7.0.0-rc.1, focusing on Bootstrap 5+.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-bootstrap-typeahead"],"cli":null},"imports":["import { Typeahead } from 'react-bootstrap-typeahead';","import { AsyncTypeahead } from 'react-bootstrap-typeahead';","import 'react-bootstrap-typeahead/css/Typeahead.css';\nimport 'react-bootstrap-typeahead/css/Typeahead.bs5.css';","import { useTypeahead } from 'react-bootstrap-typeahead';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Typeahead } from 'react-bootstrap-typeahead';\nimport 'react-bootstrap-typeahead/css/Typeahead.css';\nimport 'react-bootstrap-typeahead/css/Typeahead.bs5.css'; // For Bootstrap 5\n\ninterface Option {\n  id: number;\n  label: string;\n}\n\nconst options: Option[] = [\n  { id: 1, label: 'Apple' },\n  { id: 2, label: 'Banana' },\n  { id: 3, label: 'Orange' },\n  { id: 4, label: 'Pineapple' },\n  { id: 5, label: 'Strawberry' },\n];\n\nfunction MyTypeaheadComponent() {\n  const [selected, setSelected] = useState<Option[]>([]);\n\n  return (\n    <div className=\"container mt-5\">\n      <h3>Basic Typeahead Example</h3>\n      <Typeahead\n        id=\"my-typeahead\"\n        options={options}\n        labelKey=\"label\"\n        placeholder=\"Choose a fruit...\"\n        onChange={(selectedOptions) => {\n          setSelected(selectedOptions as Option[]);\n          console.log('Selected:', selectedOptions);\n        }}\n        selected={selected}\n        clearButton\n        highlightOnlyResult\n        renderMenuItemChildren={(option, props) => (\n          <div key={option.id}>\n            <span>{option.label}</span>\n          </div>\n        )}\n      />\n      {selected.length > 0 && (\n        <div className=\"mt-3\">\n          Selected items: {selected.map(item => item.label).join(', ')}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default MyTypeaheadComponent;","lang":"typescript","description":"This quickstart demonstrates a basic Typeahead component with static options, single selection, a clear button, and custom menu item rendering, suitable for Bootstrap 5 environments.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}