A simple react auto suggest input box

This is a simple, basic auto-suggest input box for React forms. To use it, simply pass in a list of suggestions and retrieve the selected value using a callback function. This component is compatible with TypeScript as well.

Please see the DEMO here

Install

npm

npm install --save autosuggest-input-box

yarn

yarn add autosuggest-input-box

Example

import AutoSuggestInput from "autosuggest-input-box";

const suggestions = ["China","India","United States","Indonesia","Pakistan","Brazil","Nigeria","Bangladesh","Russia","Mexico","Japan","Ethiopia","Philippines","gypt","Vietnam","DR Congo","Turkey","Iran","Germany","Thailand","United Kingdom","France","Italy","Tanzania","SouthAfrica","Myanmar","Kenya","South Korea","Colombia","Spain","Uganda","Argentina","Algeria","Sudan","Ukraine","Iraq","Afghanistan","Poland","Canada","Moocco","Saudi Arabia","Uzbekistan","Peru","Angola","Malaysia","Mozambique","Ghana","Yemen","Nepal","Venezuela"];

const App = () => {
  const onChange = (input) => {
    console.log(input);
  };
  return (
    <div>
      Country:
      <AutoSuggestInput list={suggestions} onChange={onChange} />
    </div>
  );
};

export default App;

API

| Prop | Type | Required | Description | | :------------------------------- | :------------ | :------: | :--------------------------------------------------------------------------------------------------------- | | list | string[] | ✓ | This contains list of values to be shown as suggestions | | onChange | Function | ✓ | This function is used to capture the change in input box. It can be used to update the state in your file. | | id | String | | Element id to uniquely identify the input box in DOM | | name | String | | Element name to identify the element in form submissions | | placeholder | String | | Placeholder for the input box | | inputStyle | CSSProperties | | Input box react style object | | listStyle | CSSProperties | | List react style object | | itemStyle | CSSProperties | | Item react style object | | itemHoverStyle | CSSProperties | | Input hover react style object | | className | String | | Deprecated from v1.0.13 |