AutoComplete React Component

Overview

This AutoComplete React component enhances user input experience by providing real-time suggestions as the user types. It is minimalist, highly customizable and easy to integrate into your React projects.

Features

• 🔄 Dynamic Filtering: Filters options based on user input.
• ✨ Customizable Styles: Supports BEM methodology for easy styling.
• 🔒 Option Restriction: Option to restrict input to the provided options.
• 🔄 Updatable: Responds to changes with an onChange handler.

Installation

npm install autocomplete-react-minimalist

Usage

import Autocomplete from "autocomplete-react-minimalist";

const options = [
  { label: "Afghanistan", key: "AF" },
  { label: "Åland Islands", key: "AX" },
  { label: "Albania", key: "AL" },
  { label: "Algeria", key: "DZ" },
  { label: "American Samoa", key: "AS" },
  { label: "Andorra", key: "AD" },
];

const MyComponent = () => {
  return (
    <Autocomplete
      inputKey="my-autocomplete"
      placeholder="Type to search..."
      listToFilter={options}
      modifierClass=""
      isRestrictedToOption={true}
      onChange={(value) => console.log(value)}
      notFoundMessage="No results found."
    />
  );
};

Props

• 🆔 inputKey (string): Unique key for the input element.
• 💬 placeholder (string): Placeholder text for the input field.
• 📋 listToFilter (array): Array of objects with key and label to filter. Inside sample you can find a json example.
• 🎨 modifierClass (string): Custom CSS class for styling.
• 🚀 initValue (string): Initial value of the input.
• 🔒 isRestrictedToOption (boolean): Restricts input to the provided options.
• 🔄 onChange (function): Callback function for input change. Receives the key and value for the selected option.
• 🔄 notFoundMessage (string): If this is defined, It'll show this message when no options are found instead of closing the dropdown.

Styles

Use BEM conventions for custom styling. We're working to support tailwind.

Component	Class
Input	autocomplete__input
List Container	autocomplete__search
List Item (option)	autocomplete__search-item

Collaborate

Feel free to open an issue or submit a pull request. We're open to suggestions and improvements. Before any contribution, please format the code as the project with npm run format.

If you like the component, please give it a star ⭐️ on Github