1 | # React Bootstrap Typeahead
|
2 |
|
3 | A [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/).
|
4 |
|
5 | [](https://www.npmjs.com/package/react-bootstrap-typeahead)
|
6 | [](https://www.npmjs.com/package/react-bootstrap-typeahead)
|
7 | [](https://github.com/ericgio/react-bootstrap-typeahead/actions/workflows/ci.yml)
|
8 | [](https://app.codecov.io/gh/ericgio/react-bootstrap-typeahead/)
|
9 | [](LICENSE.md)
|
10 |
|
11 | 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.
|
12 |
|
13 | ## Installation
|
14 |
|
15 | ```
|
16 | npm install --save react-bootstrap-typeahead
|
17 | ```
|
18 |
|
19 | or
|
20 |
|
21 | ```
|
22 | yarn add react-bootstrap-typeahead
|
23 | ```
|
24 |
|
25 | Include the module in your project:
|
26 |
|
27 | ```jsx
|
28 | import { Typeahead } from 'react-bootstrap-typeahead'; // ES2015
|
29 | var Typeahead = require('react-bootstrap-typeahead').Typeahead; // CommonJS
|
30 | ```
|
31 |
|
32 | #### UMD Build
|
33 |
|
34 | Development 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/).
|
35 |
|
36 | ## Documentation
|
37 |
|
38 | - [Basic Usage](docs/Usage.md)
|
39 | - [Data](docs/Data.md)
|
40 | - [Filtering](docs/Filtering.md)
|
41 | - [Rendering](docs/Rendering.md)
|
42 | - [Public Methods](docs/Methods.md)
|
43 | - [API & Props](docs/API.md)
|
44 | - [Upgrade Guide](docs/Upgrading.md)
|
45 |
|
46 | ## CSS
|
47 |
|
48 | While the component relies primarily on Bootstrap, some additional styling is needed. You should include the provided CSS file in your project:
|
49 |
|
50 | ```js
|
51 | // Import as a module in your JS
|
52 | import 'react-bootstrap-typeahead/css/Typeahead.css';
|
53 | ```
|
54 |
|
55 | or
|
56 |
|
57 | ```html
|
58 | <!-- Link as a stylesheet in your HTML -->
|
59 | <link
|
60 | rel="stylesheet"
|
61 | href="https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css"
|
62 | />
|
63 | ```
|
64 |
|
65 | ### Bootstrap 5
|
66 | 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.
|
67 |
|
68 | ## Examples
|
69 |
|
70 | Try 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.
|
71 |
|
72 | You can also try out the following sandbox examples:
|
73 |
|
74 | - [Windowing with large data sets](https://codesandbox.io/s/react-bootstrap-typeahead-windowing-example-4q1yjrzrn0)
|
75 | - [Asynchronous pagination](https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-qg895)
|
76 | - [Combobox](https://codesandbox.io/s/rbt-combobox-example-kkmyd)
|
77 | - [Validation and feedback](https://codesandbox.io/s/rbt-validation-feedback-example-4w01px4z6x)
|
78 | - [Custom loader & clear button](https://codesandbox.io/s/rbt-custom-aux-components-gn3kn)
|
79 | - [Multi-select with reorderable drag & drop tokens](https://codesandbox.io/s/rbt-drag-drop-token-example-u43sf)
|
80 | - [Keep the menu open during multi-selection](https://codesandbox.io/s/rbt-keep-menu-open-during-multi-select-nr2y4)
|
81 | - [Single-select with floating label (BS5)](https://codesandbox.io/s/rbt-floating-labels-8c2j6b)
|
82 |
|
83 | 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!
|
84 |
|
85 | ## Browser Support
|
86 |
|
87 | Recent versions of the following browsers are supported:
|
88 |
|
89 | - Chrome
|
90 | - Firefox
|
91 | - Edge
|
92 | - Safari
|
93 |
|
94 | Special thanks to [BrowserStack](https://www.browserstack.com) for providing cross-browser testing support.
|
95 |
|
96 | [](https://www.browserstack.com)
|
97 |
|
98 | ## License
|
99 |
|
100 | [MIT](https://github.com/ericgio/react-bootstrap-typeahead/blob/master/LICENSE.md)
|