UNPKG

3.98 kBMarkdownView Raw
1# React Bootstrap Typeahead
2A [React](https://reactjs.org/)-based typeahead that relies on [Bootstrap](https://getbootstrap.com/) for styling and was originally inspired by Twitter's [typeahead.js](https://github.com/twitter/typeahead.js). It supports both single- and multi-selection and is compliant with [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). Try the [live examples](http://ericgio.github.io/react-bootstrap-typeahead/).
3
4[![npm version](https://img.shields.io/npm/v/react-bootstrap-typeahead.svg?style=flat-square)](https://www.npmjs.com/package/react-bootstrap-typeahead)
5[![npm downloads](https://img.shields.io/npm/dm/react-bootstrap-typeahead.svg?style=flat-square)](https://www.npmjs.com/package/react-bootstrap-typeahead)
6[![build status](https://img.shields.io/travis/ericgio/react-bootstrap-typeahead/master.svg?style=flat-square)](https://travis-ci.org/ericgio/react-bootstrap-typeahead)
7[![Coveralls github](https://img.shields.io/coveralls/github/ericgio/react-bootstrap-typeahead/4.0.svg?style=flat-square)](https://coveralls.io/github/ericgio/react-bootstrap-typeahead)
8[![MIT License](https://flat.badgen.net/github/license/ericgio/react-bootstrap-typeahead)](LICENSE.md)
9
10Please note that documentation and examples apply to the most recent release and may no longer be applicable if you're using an outdated version.
11
12## Installation
13
14```
15npm install --save react-bootstrap-typeahead
16```
17or
18```
19yarn add react-bootstrap-typeahead
20```
21
22Include the module in your project:
23```jsx
24import { Typeahead } from 'react-bootstrap-typeahead'; // ES2015
25var Typeahead = require('react-bootstrap-typeahead').Typeahead; // CommonJS
26```
27
28#### UMD Build
29Development and production builds are included in the NPM package. Alternatively, you can get them from [CDNJS](https://cdnjs.com/libraries/react-bootstrap-typeahead) or [unpkg](https://unpkg.com/react-bootstrap-typeahead/).
30
31## Documentation
32- [Basic Usage](docs/Usage.md)
33- [Data](docs/Data.md)
34- [Filtering](docs/Filtering.md)
35- [Rendering](docs/Rendering.md)
36- [Public Methods](docs/Methods.md)
37- [API & Props](docs/API.md)
38- [Upgrade Guide](docs/Upgrading.md)
39
40## CSS
41While the component relies primarily on Bootstrap, some additional styling is needed. You should include the provided CSS file in your project:
42
43```js
44// Import as a module in your JS
45import 'react-bootstrap-typeahead/css/Typeahead.css';
46```
47or
48```html
49<!-- Link as a stylesheet in your HTML -->
50<link rel="stylesheet" href="https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css">
51```
52
53## Examples
54Try the [live examples](http://ericgio.github.io/react-bootstrap-typeahead/), 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.
55
56You can also try out the following sandbox examples:
57- [Windowing with large data sets](https://codesandbox.io/s/react-bootstrap-typeahead-windowing-example-4q1yjrzrn0)
58- [Asynchronous Pagination](https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-qg895)
59- [Combobox](https://codesandbox.io/s/rbt-combobox-example-kkmyd)
60- [Validation and Feedback](https://codesandbox.io/s/rbt-validation-feedback-example-4w01px4z6x)
61- [Custom Loader & Clear Button](https://codesandbox.io/s/rbt-custom-aux-components-gn3kn)
62
63If 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!
64
65## Browser Support
66Recent versions of the following browsers are supported:
67- Chrome
68- Firefox
69- IE (>=11)
70- Safari
71
72Special thanks to [BrowserStack](https://www.browserstack.com) for providing cross-browser testing support.
73
74[![http://i.imgur.com/9aLP6Fx.png?1](http://i.imgur.com/9aLP6Fx.png?1)](https://www.browserstack.com)
75
76## License
77[MIT](https://github.com/ericgio/react-bootstrap-typeahead/blob/master/LICENSE.md)