1.0.9 • Published 2 years ago
react-bootstrap-autocomplete-list v1.0.9
react-bootstrap-autocomplete-list
React autocomplete list component for bootstrap 5
Compatible with Next.js
Installation
npm install react-bootstrap-autocomplete-list
⚠️ Important
This package depends on react
, bootstrap 5
and popperjs
. Please make sure you have them installed.
Also make sure you have imported bootstrap
css & js into your react
project.
Example
import { BS5FloatingAutocompleteList } from 'react-bootstrap-autocomplete-list';
export default function Example() {
const items = ['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6'];
function getSelectedValue(item) {
console.log(item);
}
return (
<>
<BS5FloatingAutocompleteList list={items} selectedValue={getSelectedValue}></BS5FloatingAutocompleteList>
</>
);
}
Properties
Prop | Type | Default | Description |
---|---|---|---|
id | string | 'autocompleteList' | Component identifier, if you use several instances of this component, it's important to use a different identifier for each instance |
label | string | 'Autocomplete List' | Label for input element |
list | string[] | 'Item1', 'Item2', 'Item3' | List of items |
startAt | number | 0 | Set character index to start searching for items, useful for large lists to avoid performance issues |
selectedValue | function | Execute a function to get the selected item | |
valueOnChange | function | Execute a function when a user changes the content of the input field | |
maxHeight | string | '200px' | Set maximum list item height |
Contribute
Fork and clone react-bootstrap-autocomplete-list from GitHub
Install npm packages
npm install
Run the react app in dev mode
npm start
That's all, you can start contributing now ❤️