Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ericgio/react-bootstrap-typeahead
React typeahead with Bootstrap styling
https://github.com/ericgio/react-bootstrap-typeahead
bootstrap react typeahead
Last synced: 2 days ago
JSON representation
React typeahead with Bootstrap styling
- Host: GitHub
- URL: https://github.com/ericgio/react-bootstrap-typeahead
- Owner: ericgio
- License: mit
- Created: 2015-11-02T05:20:16.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T05:59:29.000Z (2 months ago)
- Last Synced: 2024-10-29T15:49:20.535Z (about 1 month ago)
- Topics: bootstrap, react, typeahead
- Language: TypeScript
- Homepage: http://ericgio.github.io/react-bootstrap-typeahead/
- Size: 8.43 MB
- Stars: 1,005
- Watchers: 13
- Forks: 408
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-cn - React Bootstrap Typeahead - A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js. (Uncategorized / Uncategorized)
- awesome-react - React Bootstrap Typeahead - A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js.
- awesome-learning-resources - React Bootstrap Typeahead - A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js. (Uncategorized / Uncategorized)
- awesome-react - React Bootstrap Typeahead - React typeahead with Bootstrap styling ` 📝 20 days ago` (React [🔝](#readme))
README
# React Bootstrap Typeahead
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/).
[](https://www.npmjs.com/package/react-bootstrap-typeahead)
[](https://www.npmjs.com/package/react-bootstrap-typeahead)
[](https://github.com/ericgio/react-bootstrap-typeahead/actions/workflows/ci.yml)
[](https://app.codecov.io/gh/ericgio/react-bootstrap-typeahead/)
[](LICENSE.md)
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:
```jsx
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](https://cdnjs.com/libraries/react-bootstrap-typeahead) or [unpkg](https://unpkg.com/react-bootstrap-typeahead/).
## Documentation
- [Basic Usage](docs/Usage.md)
- [Data](docs/Data.md)
- [Filtering](docs/Filtering.md)
- [Rendering](docs/Rendering.md)
- [Public Methods](docs/Methods.md)
- [API & Props](docs/API.md)
- [Upgrade Guide](docs/Upgrading.md)
## CSS
While the component relies primarily on Bootstrap, some additional styling is needed. You should include the provided CSS file in your project:
```js
// Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css';
```
or
```html
```
### 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](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.
You can also try out the following sandbox examples:
- [Windowing with large data sets](https://codesandbox.io/p/sandbox/stoic-river-4q1yjrzrn0)
- [Asynchronous pagination](https://codesandbox.io/p/sandbox/heuristic-pateu-zfjwjq)
- [Combobox](https://codesandbox.io/p/sandbox/friendly-bose-kkmyd)
- [Validation and feedback](https://codesandbox.io/p/sandbox/amazing-mendeleev-4w01px4z6x)
- [Custom loader & clear button](https://codesandbox.io/p/sandbox/practical-jang-gn3kn)
- [Multi-select with reorderable drag & drop tokens](https://codesandbox.io/p/sandbox/misty-water-u43sf)
- [Keep the menu open during multi-selection](https://codesandbox.io/p/sandbox/eloquent-germain-nr2y4)
- [Single-select with floating label (BS5)](https://codesandbox.io/p/sandbox/upbeat-paper-8c2j6b)
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](https://www.browserstack.com) for providing cross-browser testing support.
[](https://www.browserstack.com)
## License
[MIT](https://github.com/ericgio/react-bootstrap-typeahead/blob/master/LICENSE.md)