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

React-based typeahead component that uses Bootstrap as a base for styles and behaviors and supports both single- and multi-selection. The UI and behaviors are inspired by Twitter's typeahead.js. Try a live example.

Please note that this library is under active development and the APIs may change. The documentation below applies to the most recent version and may no longer be applicable if you're using an outdated version.

Installation

Use NPM to install the module in your project:

$ npm install --save react-bootstrap-typeahead

Include the module in your project as you normally would:

// Using ES2015 modules
import Typeahead from 'react-bootstrap-typeahead';

// Using CommonJS (Note: you must add `.default`)
var Typeahead = require('react-bootstrap-typeahead').default;

Minified and unminified UMD modules are also included in the NPM package, or you can get them from CDNJS.

v1.0.0 (beta)

A pre-release of v1.0 is now available. The code is reasonably stable, but could use some additional real-world testing. New examples and better documentation are currently the main things gating a full release. The latest stable version is v0.10.4.

This version has some breaking changes. Please see the release notes for more information. In particular, there is no longer a default Typeahead component:

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

Documentation

• Basic Usage
• Data
• Filtering
• Rendering
• Public Methods
• Props

CSS

The component tries to use as little CSS as possible, relying primarily on Bootstrap or any Bootstrap themes for styling. Some minimal styling is included in Typeahead.css and Token.css and should ideally be included wherever you're using the component.

Example

To modify the example, clone the repository, npm install and npm run example to build the example index file. You can then open the HTML file locally in a browser. You can also try the live example.

Browser Support

Recent versions of the following browsers are supported:

• Chrome
• Firefox
• IE (10/11)
• Safari

License

MIT