React Bootstrap Typeahead

6.4.1 · active · verified Sun Apr 19

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+.

Common errors

Warnings

Install

Imports

Quickstart

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.

import React, { useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import 'react-bootstrap-typeahead/css/Typeahead.bs5.css'; // For Bootstrap 5

interface Option {
  id: number;
  label: string;
}

const options: Option[] = [
  { id: 1, label: 'Apple' },
  { id: 2, label: 'Banana' },
  { id: 3, label: 'Orange' },
  { id: 4, label: 'Pineapple' },
  { id: 5, label: 'Strawberry' },
];

function MyTypeaheadComponent() {
  const [selected, setSelected] = useState<Option[]>([]);

  return (
    <div className="container mt-5">
      <h3>Basic Typeahead Example</h3>
      <Typeahead
        id="my-typeahead"
        options={options}
        labelKey="label"
        placeholder="Choose a fruit..."
        onChange={(selectedOptions) => {
          setSelected(selectedOptions as Option[]);
          console.log('Selected:', selectedOptions);
        }}
        selected={selected}
        clearButton
        highlightOnlyResult
        renderMenuItemChildren={(option, props) => (
          <div key={option.id}>
            <span>{option.label}</span>
          </div>
        )}
      />
      {selected.length > 0 && (
        <div className="mt-3">
          Selected items: {selected.map(item => item.label).join(', ')}
        </div>
      )}
    </div>
  );
}

export default MyTypeaheadComponent;

view raw JSON →