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 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
• Props
• API
• Upgrade Guide

CSS

While the component relies primarily on Bootstrap for styles, some additional CSS is necessary for everything to behave correctly. You must 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">

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.

Browser Support

Recent versions of the following browsers are supported:

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

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

License

MIT