react-bootstrap-typeahead

What is react-bootstrap-typeahead?

The react-bootstrap-typeahead package is a flexible, robust, and highly customizable typeahead (autocomplete) component for React. It is built using Bootstrap styles and provides a variety of features to enhance user experience in form inputs.

What are react-bootstrap-typeahead's main functionalities?

Basic Typeahead

This feature allows you to create a basic typeahead input where users can type and get suggestions from a predefined list of options.

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

const options = ['John', 'Paul', 'George', 'Ringo'];

function BasicTypeahead() {
  return (
    <Typeahead
      id="basic-typeahead"
      labelKey="name"
      options={options}
      placeholder="Choose a name..."
    />
  );
}

export default BasicTypeahead;

Multiple Selections

This feature allows users to select multiple options from the typeahead suggestions, making it useful for forms that require multiple inputs.

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

const options = ['John', 'Paul', 'George', 'Ringo'];

function MultiSelectTypeahead() {
  return (
    <Typeahead
      id="multi-select-typeahead"
      labelKey="name"
      multiple
      options={options}
      placeholder="Choose several names..."
    />
  );
}

export default MultiSelectTypeahead;

Custom Rendering

This feature allows you to customize the rendering of the typeahead options, providing more control over the appearance and behavior of the suggestions.

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

const options = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Paul' },
  { id: 3, name: 'George' },
  { id: 4, name: 'Ringo' }
];

function CustomRenderTypeahead() {
  return (
    <Typeahead
      id="custom-render-typeahead"
      labelKey="name"
      options={options}
      placeholder="Choose a Beatle..."
      renderMenuItemChildren={(option, props) => (
        <div>
          <span>{option.name}</span>
        </div>
      )}
    />
  );
}

export default CustomRenderTypeahead;

Other packages similar to react-bootstrap-typeahead

react-autosuggest

react-autosuggest is a popular package for building autocomplete and autosuggest components in React. It offers a high degree of customization and flexibility, similar to react-bootstrap-typeahead, but does not rely on Bootstrap for styling.

downshift

downshift is a highly customizable library for building autocomplete, dropdown, and select components in React. It provides a set of primitives to build complex components, offering more flexibility but requiring more setup compared to react-bootstrap-typeahead.

react-select

react-select is a flexible and beautiful Select Input control for React with support for multi-select, async options, and more. It is highly customizable and provides a rich set of features, making it a strong alternative to react-bootstrap-typeahead.

README

React Bootstrap Typeahead

A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js. It supports both single- and multi-selection and is compliant with WAI-ARIA authoring practices. Try the live examples.

Please note that documentation and examples apply to the most recent release and may no longer be applicable if you're using an outdated version.

Installation

npm install --save react-bootstrap-typeahead

or

yarn add react-bootstrap-typeahead

Include the module in your project:

import { Typeahead } from 'react-bootstrap-typeahead'; // ES2015
var Typeahead = require('react-bootstrap-typeahead').Typeahead; // CommonJS

UMD Build

Development and production builds are included in the NPM package. Alternatively, you can get them from CDNJS or unpkg.

Documentation

• Basic Usage
• Data
• Filtering
• Rendering
• Public Methods
• API & Props
• Upgrade Guide

CSS

While the component relies primarily on Bootstrap, some additional styling is needed. You should include the provided CSS file in your project:

// Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css';

or

<!-- Link as a stylesheet in your HTML -->
<link
  rel="stylesheet"
  href="https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css"
/>

Bootstrap 5

In an effort to support Bootstrap 5, this package also contains a CSS file named Typeahead.bs5.css that should be included alongside the base CSS file above.

Examples

Try the live examples, which also include code samples. If you'd like to modify the examples, clone the repository and run npm install and npm start to build the example file. You can then open the HTML file locally in your browser.

You can also try out the following sandbox examples:

• Windowing with large data sets
• Asynchronous pagination
• Combobox
• Validation and feedback
• Custom loader & clear button
• Multi-select with reorderable drag & drop tokens
• Keep the menu open during multi-selection
• Single-select with floating label (BS5)

If you have an example use case that would be useful to others, please create a sandbox and submit a pull request to add it to the list!

Browser Support

Recent versions of the following browsers are supported:

• Chrome
• Firefox
• Edge
• Safari

Special thanks to BrowserStack for providing cross-browser testing support.

License

MIT