{"id":11654,"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+.","status":"active","version":"6.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/ericgio/react-bootstrap-typeahead","tags":["javascript","auto complete","auto suggest","auto-complete","auto-suggest","autocomplete","autosuggest","bootstrap","bootstrap tokenizer","typescript"],"install":[{"cmd":"npm install react-bootstrap-typeahead","lang":"bash","label":"npm"},{"cmd":"yarn add react-bootstrap-typeahead","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-bootstrap-typeahead","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component rendering.","package":"react","optional":false},{"reason":"Peer dependency for DOM manipulation in React.","package":"react-dom","optional":false}],"imports":[{"note":"ESM import is preferred. CommonJS `require` is provided but less common in modern React projects and might behave differently in v7.","wrong":"const Typeahead = require('react-bootstrap-typeahead').Typeahead;","symbol":"Typeahead","correct":"import { Typeahead } from 'react-bootstrap-typeahead';"},{"note":"AsyncTypeahead is a named export from the main package entry point. Direct subpath imports might not be stable or intended.","wrong":"import AsyncTypeahead from 'react-bootstrap-typeahead/AsyncTypeahead';","symbol":"AsyncTypeahead","correct":"import { AsyncTypeahead } from 'react-bootstrap-typeahead';"},{"note":"The CSS files are essential for proper styling. `Typeahead.bs5.css` is specifically for Bootstrap 5+ and should be included alongside the base CSS. While CDN links work, module import is typical for bundlers.","wrong":"<link rel=\"stylesheet\" href=\"https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css\" />","symbol":"CSS","correct":"import 'react-bootstrap-typeahead/css/Typeahead.css';\nimport 'react-bootstrap-typeahead/css/Typeahead.bs5.css';"},{"note":"This hook was exported in v7.0.0-rc.4 for building more flexible custom typeaheads.","symbol":"useTypeahead","correct":"import { useTypeahead } from 'react-bootstrap-typeahead';"}],"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."},"warnings":[{"fix":"Consult the official upgrade guide (`https://github.com/ericgio/react-bootstrap-typeahead/blob/7.x/docs/Upgrading.md`) for specific migration steps. Adjust `onInputChange` callback signatures and ensure `onItemSelect` is passed to custom `MenuItem` components.","message":"Version 7.0.0 introduces several breaking changes. `onInputChange` no longer receives the input value as the first argument, and falsy menu items are filtered out from `Menu`. Custom rendering of menu items via `MenuItem` requires explicitly passing `onItemSelect`.","severity":"breaking","affected_versions":">=7.0.0-rc.1"},{"fix":"If migrating to v7, upgrade your project's Bootstrap dependency to v5+. If remaining on Bootstrap 4, use `react-bootstrap-typeahead` v6.x.","message":"Support for Bootstrap 4 has been dropped in v7.0.0-rc.1. Projects using Bootstrap 4 will need to remain on a v6.x release or upgrade their Bootstrap version.","severity":"breaking","affected_versions":">=7.0.0-rc.1"},{"fix":"Ensure `import 'react-bootstrap-typeahead/css/Typeahead.css';` and, if using Bootstrap 5, `import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';` are present in your application's entry point or component where the Typeahead is used.","message":"It is critical to include the necessary CSS files for `react-bootstrap-typeahead` to render correctly. The base `Typeahead.css` is always needed, and `Typeahead.bs5.css` is specifically for Bootstrap 5 projects.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review the v7 upgrade guide (`https://github.com/ericgio/react-bootstrap-typeahead/blob/7.x/docs/Upgrading.md#v70-breaking-changes`) for detailed changes regarding component structure and styling. Adopt new hooks like `useTypeahead` for custom implementations.","message":"In v7.0.0-rc.1, the component moved away from HOCs and monolithic design towards composable hooks and components, removing previous internal managers and core typeahead components. The `gap` CSS property is now used for multi-select input styling.","severity":"breaking","affected_versions":">=7.0.0-rc.1"},{"fix":"Always refer to the version-specific documentation if not using the latest release, or upgrade to the latest stable version to align with current examples and features.","message":"Documentation and live examples on the official site (`http://ericgio.github.io/react-bootstrap-typeahead/`) primarily apply to the most recent release. Using an outdated version might lead to discrepancies between documentation and actual component behavior.","severity":"gotcha","affected_versions":"<current_latest"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use the ESM import syntax: `import { Typeahead } from 'react-bootstrap-typeahead';`","cause":"Attempting to import `Typeahead` using a CommonJS `require` statement in an environment where the module is configured for ESM, or using incorrect destructuring.","error":"TypeError: Cannot read properties of undefined (reading 'Typeahead')"},{"fix":"Ensure that `import 'react-bootstrap-typeahead/css/Typeahead.css';` is present. If using Bootstrap 5, also include `import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';`.","cause":"The necessary CSS files for the component were not imported or linked correctly in the project.","error":"Typeahead component renders without styling or with misaligned elements."},{"fix":"Refer to the v7 upgrade guide or examples for custom menu rendering. Ensure `onItemSelect` is properly passed to your custom `MenuItem` to handle selection events.","cause":"When providing a custom `renderMenuItemChildren` or `MenuItem` component in v7, the `onItemSelect` prop (or equivalent function from `useTypeahead`) was not explicitly passed down to enable selection behavior.","error":"My custom menu item component does not correctly select items or close the menu."}],"ecosystem":"npm"}