React Bootstrap Typeahead is a React-based typeahead component that enhances form input with autocomplete functionality. It's built on top of React Bootstrap and provides a flexible, customizable solution for creating typeahead/autocomplete inputs in React applications.

Pros

• Highly customizable with numerous options and callbacks
• Supports both single and multi-select modes
• Integrates well with React Bootstrap for consistent styling
• Includes accessibility features out of the box

Cons

• Requires React Bootstrap as a peer dependency, which may not fit all project needs
• Learning curve for advanced customizations
• Limited built-in styling options beyond React Bootstrap defaults

Code Examples

1. Basic usage:

import { Typeahead } from 'react-bootstrap-typeahead';

const options = ['Apple', 'Banana', 'Cherry', 'Date'];

function Example() {
  return (
    <Typeahead
      id="basic-example"
      options={options}
      placeholder="Choose a fruit..."
    />
  );
}

2. Multi-select mode:

import { Typeahead } from 'react-bootstrap-typeahead';

const options = ['Red', 'Blue', 'Green', 'Yellow'];

function MultiSelectExample() {
  return (
    <Typeahead
      id="multi-select-example"
      multiple
      options={options}
      placeholder="Choose colors..."
    />
  );
}

3. Custom filtering:

import { Typeahead } from 'react-bootstrap-typeahead';

const options = [
  { name: 'John Doe', email: 'john@example.com' },
  { name: 'Jane Smith', email: 'jane@example.com' },
];

function CustomFilterExample() {
  return (
    <Typeahead
      id="custom-filter-example"
      labelKey="name"
      options={options}
      placeholder="Search users..."
      filterBy={['name', 'email']}
    />
  );
}

Getting Started

1. Install the package and its peer dependencies:

npm install react-bootstrap-typeahead react-bootstrap bootstrap

2. Import and use the component in your React application:

import React from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';

function App() {
  const options = ['Option 1', 'Option 2', 'Option 3'];

  return (
    <div className="App">
      <Typeahead
        id="basic-typeahead"
        options={options}
        placeholder="Choose an option..."
      />
    </div>
  );
}

export default App;

Make sure to import the CSS file for proper styling. You can customize the appearance further using React Bootstrap classes or your own CSS.