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 ❤️